forked from administration/panel
47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
"use client"
|
|
|
|
import { cn } from '@/lib/utils';
|
|
import * as CheckBox from '@radix-ui/react-checkbox';
|
|
import { CheckIcon } from 'lucide-react';
|
|
|
|
const Checkbox = (props: {
|
|
children: React.ReactNode,
|
|
checked?: boolean,
|
|
onChange?: (checked: CheckBox.CheckedState) => void,
|
|
}) => {
|
|
// good enough i guess
|
|
const checkId = `${Date.now()}${Math.random()}`;
|
|
|
|
return (
|
|
<div className={cn('flex', 'items-center', 'm-1')}>
|
|
<CheckBox.Root
|
|
checked={props.checked}
|
|
onCheckedChange={props.onChange}
|
|
id={checkId}
|
|
className={cn(
|
|
'flex',
|
|
'rounded-md',
|
|
'border-gray-300',
|
|
'border',
|
|
'w-6',
|
|
'h-6',
|
|
'mr-2',
|
|
'items-center',
|
|
'justify-center',
|
|
'bg-slate-100',
|
|
'shadow-lg',
|
|
)}
|
|
>
|
|
<CheckBox.Indicator
|
|
className={cn('text-gray-500')}
|
|
>
|
|
<CheckIcon />
|
|
</CheckBox.Indicator>
|
|
</CheckBox.Root>
|
|
<label htmlFor={checkId}>{props.children}</label>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { Checkbox }
|