59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { Checkbox } from '@/components/ui/checkbox'
|
|
import { Label } from '@/components/ui/label'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface CheckboxOptionProps {
|
|
id: string
|
|
label: string
|
|
checked: boolean
|
|
onCheckedChange: (checked: boolean) => void
|
|
disabled?: boolean
|
|
className?: string
|
|
}
|
|
|
|
export function CheckboxOption({
|
|
id,
|
|
label,
|
|
checked,
|
|
onCheckedChange,
|
|
disabled = false,
|
|
className,
|
|
}: CheckboxOptionProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex items-center space-x-3 rounded-lg border p-3 cursor-pointer transition-colors select-none',
|
|
checked ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted/50',
|
|
disabled && 'opacity-50 cursor-not-allowed',
|
|
className,
|
|
)}
|
|
onClick={() => !disabled && onCheckedChange(!checked)}
|
|
role="button"
|
|
tabIndex={disabled ? -1 : 0}
|
|
onKeyDown={(e) => {
|
|
if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
|
|
e.preventDefault()
|
|
onCheckedChange(!checked)
|
|
}
|
|
}}
|
|
>
|
|
<Checkbox
|
|
id={id}
|
|
checked={checked}
|
|
onCheckedChange={onCheckedChange}
|
|
onClick={(e) => e.stopPropagation()}
|
|
disabled={disabled}
|
|
/>
|
|
<Label
|
|
htmlFor={id}
|
|
className={cn('cursor-pointer flex-1 text-sm', disabled && 'cursor-not-allowed')}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{label}
|
|
</Label>
|
|
</div>
|
|
)
|
|
}
|