34 lines
846 B
TypeScript
34 lines
846 B
TypeScript
|
import clsx from 'clsx';
|
||
|
|
import { motion } from 'framer-motion';
|
||
|
|
|
||
|
|
import { animateDropdownItem } from '@/styling/animations';
|
||
|
|
|
||
|
|
import Checkbox from './Checkbox';
|
||
|
|
|
||
|
|
interface DropdownCheckboxProps {
|
||
|
|
value: boolean;
|
||
|
|
label?: string;
|
||
|
|
title?: string;
|
||
|
|
disabled?: boolean;
|
||
|
|
setValue?: (newValue: boolean) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
function DropdownCheckbox({ title, setValue, disabled, ...restProps }: DropdownCheckboxProps) {
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
variants={animateDropdownItem}
|
||
|
|
title={title}
|
||
|
|
className={clsx(
|
||
|
|
'px-3 py-1',
|
||
|
|
'text-left overflow-ellipsis whitespace-nowrap',
|
||
|
|
'disabled:clr-text-controls',
|
||
|
|
!!setValue && !disabled && 'clr-hover'
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Checkbox tabIndex={-1} disabled={disabled} setValue={setValue} {...restProps} />
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default DropdownCheckbox;
|