2022-05-03 21:20:14 -07:00
|
|
|
import { Dialog } from '@headlessui/react'
|
2022-09-06 21:36:35 -07:00
|
|
|
import { XMarkIcon } from '@heroicons/react/20/solid'
|
2022-05-03 21:20:14 -07:00
|
|
|
|
|
|
|
type ModalProps = {
|
|
|
|
children: React.ReactNode
|
2022-08-16 21:49:20 -07:00
|
|
|
disableOutsideClose?: boolean
|
2022-12-20 17:14:35 -08:00
|
|
|
fullScreen?: boolean
|
2022-05-03 21:20:14 -07:00
|
|
|
isOpen: boolean
|
2022-07-20 21:50:56 -07:00
|
|
|
onClose: () => void
|
|
|
|
hideClose?: boolean
|
2022-05-03 21:20:14 -07:00
|
|
|
}
|
|
|
|
|
2022-07-20 21:50:56 -07:00
|
|
|
function Modal({
|
|
|
|
children,
|
2022-08-16 21:49:20 -07:00
|
|
|
disableOutsideClose = false,
|
2022-12-20 17:14:35 -08:00
|
|
|
fullScreen = false,
|
2022-07-20 21:50:56 -07:00
|
|
|
isOpen,
|
|
|
|
onClose,
|
|
|
|
hideClose,
|
|
|
|
}: ModalProps) {
|
2023-01-05 03:21:30 -08:00
|
|
|
const handleClose = () => {
|
|
|
|
if (disableOutsideClose) return
|
|
|
|
onClose()
|
|
|
|
}
|
|
|
|
|
2022-05-03 21:20:14 -07:00
|
|
|
return (
|
|
|
|
<Dialog
|
|
|
|
open={isOpen}
|
2023-01-05 03:21:30 -08:00
|
|
|
onClose={handleClose}
|
2022-12-15 19:16:05 -08:00
|
|
|
className="relative z-40 overflow-y-auto"
|
2022-05-03 21:20:14 -07:00
|
|
|
>
|
2022-11-16 07:23:44 -08:00
|
|
|
<div
|
2023-03-03 06:32:28 -08:00
|
|
|
className={`fixed inset-0 backdrop-brightness-[0.5] ${
|
2022-11-16 07:23:44 -08:00
|
|
|
disableOutsideClose ? 'pointer-events-none' : ''
|
|
|
|
}`}
|
|
|
|
aria-hidden="true"
|
|
|
|
/>
|
2022-12-20 17:14:35 -08:00
|
|
|
<div
|
2023-03-02 09:02:26 -08:00
|
|
|
className={`fixed inset-0 flex items-center sm:justify-center ${
|
2022-12-20 17:14:35 -08:00
|
|
|
fullScreen ? '' : 'sm:px-4'
|
|
|
|
}`}
|
|
|
|
>
|
|
|
|
<Dialog.Panel
|
|
|
|
className={`h-full w-full bg-th-bkg-1 ${
|
|
|
|
fullScreen
|
|
|
|
? ''
|
|
|
|
: 'p-4 pt-6 sm:h-auto sm:max-w-md sm:rounded-lg sm:border sm:border-th-bkg-3 sm:p-6'
|
|
|
|
} relative `}
|
|
|
|
>
|
2022-07-20 21:50:56 -07:00
|
|
|
{!hideClose ? (
|
|
|
|
<button
|
|
|
|
onClick={onClose}
|
2022-12-20 15:14:01 -08:00
|
|
|
className={`absolute right-4 top-4 z-40 text-th-fgd-4 focus:outline-none sm:right-2 sm:top-2 md:hover:text-th-active`}
|
2022-07-20 21:50:56 -07:00
|
|
|
>
|
2022-09-29 21:21:23 -07:00
|
|
|
<XMarkIcon className={`h-6 w-6`} />
|
2022-07-20 21:50:56 -07:00
|
|
|
</button>
|
|
|
|
) : null}
|
2022-11-16 18:18:50 -08:00
|
|
|
<div>{children}</div>
|
2022-11-16 07:23:44 -08:00
|
|
|
</Dialog.Panel>
|
2022-05-03 21:20:14 -07:00
|
|
|
</div>
|
|
|
|
</Dialog>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Modal
|