acasini/n3wt-school
1
0
Fork 0
mirror of https://git.v0id.ovh/n3wt-innov/n3wt-school.git synced 2026-01-29 07:53:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Evolution des modèles pour intégrer un planning et du m2m

Browse Source
This commit is contained in:
N3WT DE COMPET
2024-11-27 18:11:28 +01:00
parent e1202c6e6d
commit 85d4c007cb
9 changed files with 282 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
Front-End/src/components/ToggleSwitch.js
View File

@ -1,25 +1,35 @@
import React from 'react';
import { useRef } from 'react';
const ToggleSwitch = ({ label, checked, onChange }) => {
return (
<div className="flex items-center mt-4">
<label className="mr-2 text-gray-600">{label}</label>
<div className="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
<input
type="checkbox"
name="toggle"
id="toggle"
checked={checked}
onChange={onChange}
className="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer border-emerald-500 checked:right-0 checked:border-emerald-500 checked:bg-emerald-500 focus:border-emerald-500 focus:bg-emerald-500 hover:border-emerald-500 hover:bg-emerald-500"
/>
<label
htmlFor="toggle"
className={`toggle-label block overflow-hidden h-6 rounded-full cursor-pointer transition-colors duration-200 ${checked ? 'bg-emerald-300' : 'bg-gray-300'}`}
></label>
</div>
</div>
);
const inputRef = useRef(null);
const handleChange = (e) => {
onChange(e);
if (inputRef.current) {
inputRef.current.blur(); // Remove focus
}
};
return (
<div className="flex items-center mt-4">
<label className="mr-2 text-gray-600">{label}</label>
<div className="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
<input
type="checkbox"
name="toggle"
id="toggle"
checked={checked}
onChange={handleChange}
className="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer border-emerald-500 checked:right-0 checked:border-emerald-500 checked:bg-emerald-500 hover:border-emerald-500 hover:bg-emerald-500 focus:outline-none focus:ring-0"
ref={inputRef} // Reference to the input element
/>
<label
htmlFor="toggle"
className={`toggle-label block overflow-hidden h-6 rounded-full cursor-pointer transition-colors duration-200 ${checked ? 'bg-emerald-300' : 'bg-gray-300'}`}
></label>
</div>
</div>
);
};
export default ToggleSwitch;