46 lines
1.0 KiB
TypeScript
46 lines
1.0 KiB
TypeScript
import clsx from 'clsx';
|
|
import { motion } from 'framer-motion';
|
|
|
|
import { animateDropdown } from '@/styling/animations';
|
|
|
|
import { CProps } from '../props';
|
|
|
|
interface DropdownProps extends CProps.Styling {
|
|
stretchLeft?: boolean;
|
|
stretchTop?: boolean;
|
|
isOpen: boolean;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
function Dropdown({ isOpen, stretchLeft, stretchTop, className, children, ...restProps }: DropdownProps) {
|
|
return (
|
|
<div className='relative'>
|
|
<motion.div
|
|
tabIndex={-1}
|
|
className={clsx(
|
|
'z-modalTooltip',
|
|
'absolute mt-3',
|
|
'flex flex-col',
|
|
'border rounded-md shadow-lg',
|
|
'text-sm',
|
|
'clr-input',
|
|
{
|
|
'right-0': stretchLeft,
|
|
'left-0': !stretchLeft,
|
|
'bottom-[2rem]': stretchTop
|
|
},
|
|
className
|
|
)}
|
|
initial={false}
|
|
animate={isOpen ? 'open' : 'closed'}
|
|
variants={animateDropdown}
|
|
{...restProps}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Dropdown;
|