43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import { cn } from "@/lib/utils"
|
|
import { useState } from "react"
|
|
|
|
interface SurrealToggleProps {
|
|
defaultChecked?: boolean
|
|
onChange?: (checked: boolean) => void
|
|
label?: string
|
|
className?: string
|
|
}
|
|
|
|
export function SurrealToggle({ defaultChecked = false, onChange, label, className }: SurrealToggleProps) {
|
|
const [checked, setChecked] = useState(defaultChecked)
|
|
|
|
const handleToggle = () => {
|
|
const newValue = !checked
|
|
setChecked(newValue)
|
|
onChange?.(newValue)
|
|
}
|
|
|
|
return (
|
|
<label className={cn("inline-flex items-center gap-3 cursor-pointer", className)}>
|
|
<button
|
|
type="button"
|
|
role="switch"
|
|
aria-checked={checked}
|
|
onClick={handleToggle}
|
|
className={cn(
|
|
"relative w-12 h-6 rounded-full transition-all duration-300",
|
|
checked ? "bg-primary" : "bg-secondary",
|
|
)}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"absolute top-1 w-4 h-4 rounded-full bg-foreground transition-all duration-300",
|
|
checked ? "left-7" : "left-1",
|
|
)}
|
|
/>
|
|
</button>
|
|
{label && <span className="text-sm text-foreground">{label}</span>}
|
|
</label>
|
|
)
|
|
}
|