2023-12-15 17:34:50 +03:00
|
|
|
import clsx from 'clsx';
|
|
|
|
|
2023-12-18 19:42:27 +03:00
|
|
|
import { CProps } from '../props';
|
2023-12-15 17:34:50 +03:00
|
|
|
import Overlay from './Overlay';
|
|
|
|
|
2023-12-18 19:42:27 +03:00
|
|
|
interface DropdownProps
|
|
|
|
extends CProps.Styling {
|
2023-07-20 17:11:03 +03:00
|
|
|
stretchLeft?: boolean
|
2023-12-15 17:34:50 +03:00
|
|
|
children: React.ReactNode
|
2023-07-20 17:11:03 +03:00
|
|
|
}
|
|
|
|
|
2023-12-15 17:34:50 +03:00
|
|
|
function Dropdown({
|
2023-12-18 19:42:27 +03:00
|
|
|
className,
|
2023-12-15 17:34:50 +03:00
|
|
|
stretchLeft,
|
2023-12-18 19:42:27 +03:00
|
|
|
children,
|
|
|
|
...restProps
|
2023-12-15 17:34:50 +03:00
|
|
|
}: DropdownProps) {
|
2023-07-20 17:11:03 +03:00
|
|
|
return (
|
2023-12-15 17:34:50 +03:00
|
|
|
<Overlay
|
|
|
|
layer='z-modal-tooltip'
|
|
|
|
position='mt-3'
|
|
|
|
className={clsx(
|
2023-12-19 11:18:28 +03:00
|
|
|
'flex flex-col',
|
2023-12-15 17:34:50 +03:00
|
|
|
'border rounded-md shadow-lg',
|
|
|
|
'text-sm',
|
|
|
|
'clr-input',
|
|
|
|
{
|
|
|
|
'right-0': stretchLeft,
|
|
|
|
'left-0': !stretchLeft
|
|
|
|
},
|
2023-12-18 19:42:27 +03:00
|
|
|
className
|
|
|
|
)}
|
|
|
|
{...restProps}
|
2023-12-15 17:34:50 +03:00
|
|
|
>
|
2023-12-04 14:19:54 +03:00
|
|
|
{children}
|
2023-12-15 17:34:50 +03:00
|
|
|
</Overlay>);
|
2023-07-20 17:11:03 +03:00
|
|
|
}
|
|
|
|
|
2023-12-15 17:34:50 +03:00
|
|
|
export default Dropdown;
|