49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
interface SwitchProps {
|
|
checked: boolean
|
|
onChange: (checked: boolean) => void
|
|
label?: string
|
|
vertical?: boolean
|
|
}
|
|
|
|
export function Switch({ checked, onChange, label, vertical = false }: SwitchProps) {
|
|
if (vertical) {
|
|
return (
|
|
<label className="flex flex-col items-center gap-1 cursor-pointer">
|
|
<div
|
|
className={`relative w-4 h-12 border-2 transition-colors ${
|
|
checked ? 'bg-white border-white' : 'bg-black border-white'
|
|
}`}
|
|
onClick={() => onChange(!checked)}
|
|
>
|
|
<div
|
|
className={`absolute left-0 w-3 h-3 transition-transform ${
|
|
checked ? 'translate-y-8 bg-black' : 'translate-y-0 bg-white'
|
|
}`}
|
|
/>
|
|
</div>
|
|
</label>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<div
|
|
className={`relative w-8 h-4 border-2 transition-colors ${
|
|
checked ? 'bg-white border-white' : 'bg-black border-white'
|
|
}`}
|
|
onClick={() => onChange(!checked)}
|
|
>
|
|
<div
|
|
className={`absolute top-0 w-3 h-3 transition-transform ${
|
|
checked ? 'translate-x-4 bg-black' : 'translate-x-0 bg-white'
|
|
}`}
|
|
/>
|
|
</div>
|
|
{label && (
|
|
<span className="font-mono text-[9px] text-white select-none">
|
|
{label}
|
|
</span>
|
|
)}
|
|
</label>
|
|
)
|
|
} |