50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { Dialog, Transition } from '@headlessui/react'
|
|
import type { ReactNode } from 'react'
|
|
import { Fragment } from 'react'
|
|
|
|
export default function CollectionModal({
|
|
show,
|
|
children,
|
|
onClose,
|
|
}: {
|
|
show: boolean
|
|
children: ReactNode
|
|
onClose: () => void
|
|
}) {
|
|
return (
|
|
<Transition appear as={Fragment} show={show}>
|
|
<Dialog as="div" className="relative z-50" onClose={onClose}>
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-100"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
>
|
|
<div className="fixed inset-0 bg-black/80" />
|
|
</Transition.Child>
|
|
|
|
<div className="overflow-y-auto fixed inset-0">
|
|
<div className="flex justify-center items-center px-2 m-auto w-full min-h-full md:w-3/5 xl:w-2/5">
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0 scale-95"
|
|
enterTo="opacity-100 scale-100"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-100 scale-100"
|
|
leaveTo="opacity-0 scale-95"
|
|
>
|
|
<Dialog.Panel className="w-full">{children}</Dialog.Panel>
|
|
</Transition.Child>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</Transition>
|
|
)
|
|
}
|