Files
lingxi-web/src/components/ui/switch.tsx
T
wmq af49d22ca7 feat: release contextual omnichannel customer platform
Add Telegram, WhatsApp and email account management, realtime messaging, contextual multilingual AI, customer intelligence, knowledge workflows, enterprise controls, a unified design system and complete repository documentation.
2026-07-30 02:29:53 +08:00

39 lines
1.0 KiB
TypeScript

import { cn } from '@/utils/cn'
export function Switch({
checked,
onCheckedChange,
disabled,
className,
ariaLabel,
}: {
checked: boolean
onCheckedChange?: (v: boolean) => void
disabled?: boolean
className?: string
ariaLabel?: string
}) {
return (
<button
type="button"
role="switch"
aria-checked={checked}
aria-label={ariaLabel}
disabled={disabled}
onClick={() => onCheckedChange?.(!checked)}
className={cn(
'relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
checked ? 'bg-primary' : 'bg-input',
className,
)}
>
<span
className={cn(
'inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform',
checked ? 'translate-x-[18px] rtl:-translate-x-[18px]' : 'translate-x-[2px] rtl:-translate-x-[2px]',
)}
/>
</button>
)
}