NextJS 14 x Tailwind - Custom checkbox on/off selector

checkbox.tsx

const customCss = `
// Include in a separate scss file with : 
import './input.scss';

// scss file content :

    .toggle-checkbox:checked + .toggle-label {
        background-color: #4ade80; /* Couleur verte pour ON */
    }

    .toggle-checkbox:checked + .toggle-label:before {
        transform: translateX(100%);
        border-color: #4ade80; /* Couleur verte pour ON */
    }

    .toggle-label {
        width: 3rem;
        transition: background-color 0.2s ease-in;
    }

    .toggle-label:before {
        content: "";
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        background: white;
        border-radius: 50%;
        transition: transform 0.2s ease-in;
        border: 2px solid #d1d5db; /* Couleur grise pour OFF */
    }
`;

interface InputProps {
    label: string;
    value: string;
    inline?: boolean;
    onChange: (value: string) => void;
}


export default function Input({ label, value, inline = false, onChange }: InputProps) {

    const handleValueChange = (value: string) => {
        console.log(value);
        onChange(value);
    }

    return (
        <div className={`flex ${inline ? 'flex-row items-center' : 'flex-col'}`}>
            <label className={`font-semibold text-sm ${inline ? 'mr-4' : ''}`}>{label}</label>
            <div
                className="relative inline-block w-12 mr-2 align-middle select-none transition duration-200 ease-in">
                <input
                    type="checkbox"
                    checked={value === 'true'}
                    onChange={(e) => handleValueChange(e.target.checked ? 'true' : 'false')}
                    className="toggle-checkbox absolute block w-4 h-4 rounded-full bg-white border-4 appearance-none cursor-pointer"
                    style={{display: 'none'}}
                    id="toggle"
                />
                <label
                    htmlFor="toggle"
                    className="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"
                ></label>
            </div>
        </div>
    );
}