refactor: Refactoring de la section ClassSection

This commit is contained in:
N3WT DE COMPET
2025-02-07 08:01:47 +01:00
parent 72dd7699d6
commit 1a8ef26f58
11 changed files with 642 additions and 486 deletions

View File

@ -1,6 +1,6 @@
import { useRef } from 'react';
const ToggleSwitch = ({ label, checked, onChange }) => {
const ToggleSwitch = ({ name, label, checked, onChange }) => {
const inputRef = useRef(null);
const handleChange = (e) => {
@ -16,15 +16,15 @@ const ToggleSwitch = ({ label, checked, onChange }) => {
<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"
name={name}
id={name}
checked={checked}
onChange={handleChange}
className="hover:text-emerald-500 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"
htmlFor={name}
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>