30 lines
984 B
TypeScript
30 lines
984 B
TypeScript
|
interface ToggleProps {
|
||
|
|
checked: boolean
|
||
|
|
onChange: (checked: boolean) => void
|
||
|
|
label?: string
|
||
|
|
description?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Toggle({ checked, onChange, label, description }: ToggleProps) {
|
||
|
|
return (
|
||
|
|
<label className="flex items-start gap-3 cursor-pointer">
|
||
|
|
<div className="relative mt-0.5">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={checked}
|
||
|
|
onChange={e => onChange(e.target.checked)}
|
||
|
|
className="sr-only peer"
|
||
|
|
/>
|
||
|
|
<div className="w-10 h-6 bg-border rounded-full peer-checked:bg-accent transition-colors" />
|
||
|
|
<div className="absolute left-1 top-1 w-4 h-4 bg-white rounded-full shadow transition-transform peer-checked:translate-x-4" />
|
||
|
|
</div>
|
||
|
|
<div className="flex-1">
|
||
|
|
<div className="text-sm font-medium text-text">{label || ""}</div>
|
||
|
|
{description && (
|
||
|
|
<div className="text-xs text-muted mt-0.5">{description}</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</label>
|
||
|
|
)
|
||
|
|
}
|