Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
1.2 kB · 48 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849import { cn } from "@/lib/utils";
interface SwitchProps { checked: boolean; onCheckedChange: (checked: boolean) => void; disabled?: boolean; className?: string; size?: "sm" | "default";}
function Switch({ checked, onCheckedChange, disabled, className, size = "default",}: SwitchProps) { const isSmall = size === "sm"; return ( <button type="button" role="switch" aria-checked={checked} disabled={disabled} onClick={() => onCheckedChange(!checked)} className={cn( "relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors disabled:cursor-not-allowed disabled:opacity-50", checked ? "bg-info" : "bg-danger", isSmall ? "h-4 w-7" : "h-5 w-9", className, )} > <span className={cn( "pointer-events-none inline-block rounded-full bg-white shadow-sm transition-transform", isSmall ? "size-3" : "size-4", checked ? isSmall ? "translate-x-3" : "translate-x-4" : "translate-x-0", )} /> </button> );}
export { Switch };