Skip to content

Commit acd2c18

Browse files
committed
feat(ui): componente Switch canónico
1 parent 6caff7b commit acd2c18

1 file changed

Lines changed: 32 additions & 0 deletions

File tree

‎app/src/components/ui/switch.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { cn } from '@/lib/utils';
2+
3+
interface SwitchProps {
4+
checked: boolean;
5+
onCheckedChange: (checked: boolean) => void;
6+
disabled?: boolean;
7+
className?: string;
8+
}
9+
10+
export function Switch({ checked, onCheckedChange, disabled, className }: SwitchProps) {
11+
return (
12+
<button
13+
type="button"
14+
role="switch"
15+
aria-checked={checked}
16+
disabled={disabled}
17+
onClick={() => onCheckedChange(!checked)}
18+
className={cn(
19+
'relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
20+
checked ? 'bg-amber-500' : 'bg-surface-2',
21+
className,
22+
)}
23+
>
24+
<span
25+
className={cn(
26+
'pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform',
27+
checked ? 'translate-x-[18px]' : 'translate-x-0.5',
28+
)}
29+
/>
30+
</button>
31+
);
32+
}

0 commit comments

Comments
 (0)