Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 1x 1x 10x 3x 3x 3x 3x 3x 3x 10x 10x 10x 10x 10x 10x 10x 10x 10x 3x 7x 3x 4x 10x 10x 10x 10x 10x 10x 10x 10x | interface ToggleProps {
checked: boolean;
onChange: (checked: boolean) => void;
disabled?: boolean;
}
export function Toggle({ checked, onChange, disabled }: ToggleProps) {
const handleClick = (e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
if (!disabled) {
onChange(!checked);
}
};
return (
<button
type="button"
role="switch"
aria-checked={checked}
disabled={disabled}
onClick={handleClick}
className={`relative inline-flex w-11 h-7 md:w-9 md:h-5 rounded-full transition-colors flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-bambu-green focus:ring-offset-2 focus:ring-offset-bambu-dark ${
disabled
? 'bg-bambu-dark-tertiary/50 cursor-not-allowed opacity-50'
: checked
? 'bg-bambu-green cursor-pointer'
: 'bg-bambu-dark-tertiary cursor-pointer hover:bg-bambu-dark-tertiary/80'
}`}
>
<span
className={`pointer-events-none absolute top-[3px] md:top-[2px] left-[3px] md:left-[2px] w-5 h-5 md:w-4 md:h-4 bg-white rounded-full shadow transition-transform duration-200 ease-in-out ${
checked ? 'translate-x-4' : 'translate-x-0'
}`}
/>
</button>
);
}
|