Sha256: c5e0fcb7392035ee2ee84b19f59dc7aafd1e7e4149f3f99b138ddfbfd9f04830
Contents?: true
Size: 1.88 KB
Versions: 4
Compression:
Stored size: 1.88 KB
Contents
import { PropsWithChildren } from 'react'
import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
export default function Modal({
children,
show = false,
maxWidth = '2xl',
closeable = true,
onClose = () => {},
}: PropsWithChildren<{
show: boolean
maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'
closeable?: boolean
onClose: CallableFunction
}>) {
const close = () => {
if (closeable) {
onClose()
}
}
const maxWidthClass = {
sm: 'sm:max-w-sm',
md: 'sm:max-w-md',
lg: 'sm:max-w-lg',
xl: 'sm:max-w-xl',
'2xl': 'sm:max-w-2xl',
}[maxWidth]
return (
<Transition show={show} leave="duration-200">
<Dialog
as="div"
id="modal"
className="fixed inset-0 flex overflow-y-auto px-4 py-6 sm:px-0 items-center z-50 transform transition-all"
onClose={close}
>
<TransitionChild
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="absolute inset-0 bg-gray-500/75 dark:bg-gray-900/75" />
</TransitionChild>
<TransitionChild
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<DialogPanel
className={`mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto ${maxWidthClass}`}
>
{children}
</DialogPanel>
</TransitionChild>
</Dialog>
</Transition>
)
}
Version data entries
4 entries across 4 versions & 1 rubygems