26 lines
799 B
TypeScript
26 lines
799 B
TypeScript
"use client";
|
|
import { cn } from "@/lib/cn";
|
|
|
|
export function Toggle({ checked, onChange, label }: { checked: boolean; onChange: (v: boolean) => void; label?: string }) {
|
|
return (
|
|
<label className="inline-flex items-center gap-2 text-sm cursor-pointer select-none">
|
|
<button
|
|
type="button"
|
|
role="switch"
|
|
aria-checked={checked}
|
|
onClick={() => onChange(!checked)}
|
|
className={cn(
|
|
"relative w-9 h-5 rounded-full transition-colors",
|
|
checked ? "bg-fg" : "bg-line",
|
|
)}
|
|
>
|
|
<span className={cn(
|
|
"absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-bg shadow-sm transition-transform",
|
|
checked && "translate-x-4",
|
|
)}/>
|
|
</button>
|
|
{label && <span>{label}</span>}
|
|
</label>
|
|
);
|
|
}
|