2022-07-24 04:48:55 -07:00
|
|
|
import { Popover, Transition } from '@headlessui/react'
|
2022-09-06 21:36:35 -07:00
|
|
|
import { XMarkIcon } from '@heroicons/react/20/solid'
|
2022-08-13 22:39:30 -07:00
|
|
|
import { useTheme } from 'next-themes'
|
2022-07-24 04:48:55 -07:00
|
|
|
import { Fragment, ReactNode } from 'react'
|
|
|
|
|
|
|
|
const IconDropMenu = ({
|
|
|
|
icon,
|
|
|
|
children,
|
2022-07-24 18:47:12 -07:00
|
|
|
disabled,
|
2022-11-16 04:14:53 -08:00
|
|
|
size,
|
2022-07-24 18:47:12 -07:00
|
|
|
postion = 'bottomRight',
|
2022-07-24 04:48:55 -07:00
|
|
|
}: {
|
|
|
|
icon: ReactNode
|
|
|
|
children: ReactNode
|
2022-07-24 18:47:12 -07:00
|
|
|
disabled?: boolean
|
2022-11-16 04:14:53 -08:00
|
|
|
size?: 'small' | 'medium' | 'large'
|
2022-07-24 18:47:12 -07:00
|
|
|
postion?:
|
|
|
|
| 'bottomLeft'
|
|
|
|
| 'bottomRight'
|
|
|
|
| 'topLeft'
|
|
|
|
| 'topRight'
|
|
|
|
| 'leftBottom'
|
|
|
|
| 'leftTop'
|
|
|
|
| 'rightBottom'
|
|
|
|
| 'rightTop'
|
2022-07-24 04:48:55 -07:00
|
|
|
}) => {
|
2022-07-24 18:47:12 -07:00
|
|
|
const panelPosition = {
|
2022-11-16 04:14:53 -08:00
|
|
|
bottomLeft: size === 'large' ? 'left-0 top-14' : 'left-0 top-12',
|
|
|
|
bottomRight: size === 'large' ? 'right-0 top-14' : 'right-0 top-12',
|
|
|
|
topLeft: size === 'large' ? 'left-0 bottom-14' : 'left-0 bottom-12',
|
|
|
|
topRight: size === 'large' ? 'right-0 bottom-14' : 'right-0 bottom-12',
|
|
|
|
leftBottom: size === 'large' ? 'right-14 bottom-0' : 'right-12 bottom-0',
|
|
|
|
leftTop: size === 'large' ? 'right-14 top-0' : 'right-12 top-0',
|
|
|
|
rightBottom: size === 'large' ? 'left-14 bottom-0' : 'left-12 bottom-0',
|
|
|
|
rightTop: size === 'large' ? 'left-14 top-0' : 'left-12 top-0',
|
2022-07-24 18:47:12 -07:00
|
|
|
}
|
2022-08-13 22:39:30 -07:00
|
|
|
const { theme } = useTheme()
|
2022-07-24 04:48:55 -07:00
|
|
|
return (
|
|
|
|
<Popover>
|
|
|
|
{({ open }) => (
|
|
|
|
<div className="relative">
|
|
|
|
<Popover.Button
|
|
|
|
className={`flex ${
|
2022-11-16 04:14:53 -08:00
|
|
|
size === 'large'
|
|
|
|
? 'h-12 w-12'
|
|
|
|
: size === 'medium'
|
|
|
|
? 'h-10 w-10'
|
|
|
|
: 'h-8 w-8'
|
2022-10-25 20:23:46 -07:00
|
|
|
} default-transition items-center justify-center rounded-full border border-th-fgd-4 md:hover:border-th-bkg-4 ${
|
2022-08-14 23:10:46 -07:00
|
|
|
theme === 'Light' ? 'text-th-button' : 'text-th-fgd-1'
|
2022-08-13 22:39:30 -07:00
|
|
|
} md:hover:text-th-fgd-1 ${
|
2022-07-24 18:47:12 -07:00
|
|
|
disabled ? 'cursor-not-allowed opacity-60' : ''
|
|
|
|
}`}
|
|
|
|
disabled={disabled}
|
2022-07-24 04:48:55 -07:00
|
|
|
>
|
2022-09-29 21:21:23 -07:00
|
|
|
{open ? <XMarkIcon className="h-6 w-6" /> : icon}
|
2022-07-24 04:48:55 -07:00
|
|
|
</Popover.Button>
|
|
|
|
<Transition
|
|
|
|
appear={true}
|
|
|
|
show={open}
|
|
|
|
as={Fragment}
|
2022-08-16 15:58:03 -07:00
|
|
|
enter="transition ease-in duration-100"
|
2022-09-29 21:21:23 -07:00
|
|
|
enterFrom="scale-90"
|
|
|
|
enterTo="scale-100"
|
2022-08-02 12:20:27 -07:00
|
|
|
leave="transition ease-out duration-100"
|
2022-07-24 04:48:55 -07:00
|
|
|
leaveFrom="opacity-100"
|
|
|
|
leaveTo="opacity-0"
|
|
|
|
>
|
|
|
|
<Popover.Panel
|
2022-10-05 17:04:16 -07:00
|
|
|
className={`absolute ${panelPosition[postion]} z-20 w-48 space-y-3 rounded-md bg-th-bkg-2 p-4`}
|
2022-07-24 04:48:55 -07:00
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</Popover.Panel>
|
|
|
|
</Transition>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</Popover>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default IconDropMenu
|