31 lines
738 B
TypeScript
31 lines
738 B
TypeScript
import { Check } from 'lucide-react'
|
|
import { cn } from '../../lib/utils'
|
|
|
|
export function Checkbox({
|
|
checked,
|
|
onChange,
|
|
label,
|
|
}: {
|
|
checked: boolean
|
|
onChange: (checked: boolean) => void
|
|
label?: string
|
|
}) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
role="checkbox"
|
|
aria-checked={checked}
|
|
aria-label={label}
|
|
onClick={() => onChange(!checked)}
|
|
className={cn(
|
|
'flex h-5 w-5 shrink-0 items-center justify-center rounded-md border transition-colors',
|
|
checked
|
|
? 'border-accent bg-accent'
|
|
: 'border-base-border bg-base-raised hover:border-slate-500',
|
|
)}
|
|
>
|
|
{checked && <Check className="h-3.5 w-3.5 text-white" strokeWidth={3} />}
|
|
</button>
|
|
)
|
|
}
|