33 أسطر
771 B
TypeScript
33 أسطر
771 B
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type SwitchProps = {
|
|
checked: boolean;
|
|
onCheckedChange: (value: boolean) => void;
|
|
className?: string;
|
|
};
|
|
|
|
export function Switch({ checked, onCheckedChange, className }: SwitchProps) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
role="switch"
|
|
aria-checked={checked}
|
|
onClick={() => onCheckedChange(!checked)}
|
|
className={cn(
|
|
"relative h-6 w-11 rounded-full border border-border transition",
|
|
checked ? "bg-primary" : "bg-secondary",
|
|
className,
|
|
)}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"absolute top-0.5 h-[18px] w-[18px] rounded-full bg-background transition",
|
|
checked ? "right-0.5" : "right-[22px]",
|
|
)}
|
|
/>
|
|
</button>
|
|
);
|
|
}
|