27 lines
817 B
TypeScript
27 lines
817 B
TypeScript
'use client';
|
|
|
|
interface ToggleSwitchProps {
|
|
enabled: boolean;
|
|
onChange: () => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export function ToggleSwitch({ enabled, onChange, disabled = false }: ToggleSwitchProps) {
|
|
return (
|
|
<button
|
|
onClick={onChange}
|
|
disabled={disabled}
|
|
className={`relative inline-flex items-center ${disabled ? 'cursor-not-allowed opacity-80' : 'cursor-pointer'}`}
|
|
type="button"
|
|
role="switch"
|
|
aria-checked={enabled}
|
|
>
|
|
<div className={`w-10 h-6 rounded-full transition ${enabled ? 'bg-primary' : 'bg-gray-300'}`}></div>
|
|
<div
|
|
className={`absolute inset-y-0 left-0 w-6 h-6 bg-white rounded-full border border-gray-300 transform transition ${
|
|
enabled ? 'translate-x-4' : 'translate-x-0'
|
|
}`}
|
|
></div>
|
|
</button>
|
|
);
|
|
}
|