| 58 | } |
| 59 | |
| 60 | export function Toggle({ checked, onChange, disabled = false }: ToggleProps) { |
| 61 | return ( |
| 62 | <button |
| 63 | role="switch" |
| 64 | aria-checked={checked} |
| 65 | disabled={disabled} |
| 66 | onClick={() => onChange(!checked)} |
| 67 | className={cn( |
| 68 | "relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent", |
| 69 | "transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:ring-offset-surface-900", |
| 70 | "disabled:cursor-not-allowed disabled:opacity-50", |
| 71 | checked ? "bg-brand-600" : "bg-surface-700" |
| 72 | )} |
| 73 | > |
| 74 | <span |
| 75 | className={cn( |
| 76 | "pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow", |
| 77 | "transition duration-200 ease-in-out", |
| 78 | checked ? "translate-x-4" : "translate-x-0" |
| 79 | )} |
| 80 | /> |
| 81 | </button> |
| 82 | ); |
| 83 | } |
| 84 | |
| 85 | interface SliderProps { |
| 86 | value: number; |