import { Fragment, useCallback } from 'react'
|
import type { ReactNode } from 'react'
|
import { Dialog, Transition } from '@headlessui/react'
|
import cn from '@/utils/classnames'
|
|
type DialogProps = {
|
className?: string
|
children: ReactNode
|
show: boolean
|
onClose?: () => void
|
}
|
|
const NewAppDialog = ({
|
className,
|
children,
|
show,
|
onClose,
|
}: DialogProps) => {
|
const close = useCallback(() => onClose?.(), [onClose])
|
return (
|
<Transition appear show={show} as={Fragment}>
|
<Dialog as="div" className="relative z-40" onClose={close}>
|
<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 bg-opacity-25" />
|
</Transition.Child>
|
|
<div className="fixed inset-0">
|
<div className="flex flex-col items-center justify-center min-h-full pt-[56px]">
|
<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={cn('grow relative w-full h-[calc(100vh-56px)] p-0 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-t-xl', className)}>
|
{children}
|
</Dialog.Panel>
|
</Transition.Child>
|
</div>
|
</div>
|
</Dialog>
|
</Transition >
|
)
|
}
|
|
export default NewAppDialog
|
