35 lines
929 B
TypeScript
35 lines
929 B
TypeScript
import { Dialog, DialogBackdrop, 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}
|
|
onClose={onClose}
|
|
className="relative z-50"
|
|
transition
|
|
>
|
|
<DialogBackdrop
|
|
className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
|
|
transition
|
|
/>
|
|
<div className="fixed inset-0 flex w-screen items-center justify-center p-4">
|
|
<DialogPanel className="max-w-lg space-y-4 rounded-lg bg-white p-8 shadow-lg duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0">
|
|
<div className="relative">{children}</div>
|
|
</DialogPanel>
|
|
</div>
|
|
</Dialog>
|
|
)
|
|
}
|