36 lines
976 B
TypeScript
36 lines
976 B
TypeScript
import { Dialog, DialogPanel } from '@headlessui/react'
|
|
import type { ReactNode } from 'react'
|
|
|
|
type ModalProperties = {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
children: ReactNode
|
|
}
|
|
|
|
export default function PopupModal({
|
|
isOpen,
|
|
onClose,
|
|
children,
|
|
}: ModalProperties) {
|
|
if (!isOpen) return
|
|
return (
|
|
<Dialog
|
|
open={isOpen}
|
|
as="div"
|
|
className="relative z-30 focus:outline-none"
|
|
onClose={onClose}
|
|
>
|
|
<div className="fixed inset-0 z-30 w-screen overflow-y-auto backdrop-blur-sm">
|
|
<div className="flex min-h-full items-center justify-center sm:p-4">
|
|
<DialogPanel
|
|
transition
|
|
className="w-full rounded-xl bg-white p-5 shadow duration-300 ease-out data-[closed]:transform-[scale(95%)] data-[closed]:opacity-0 max-md:min-h-screen max-md:min-w-screen max-sm:p-[50px] sm:max-w-md sm:p-10"
|
|
>
|
|
{children}
|
|
</DialogPanel>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
)
|
|
}
|