Sha256: a761bc46becd16b46e409e85433b7df48c209d78de4e971d8aa41e7f6b3e31bb
Contents?: true
Size: 1.93 KB
Versions: 8
Compression:
Stored size: 1.93 KB
Contents
import { Fragment, PropsWithChildren } from 'react'
import { Dialog, Transition } 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} as={Fragment} 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}
>
<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="absolute inset-0 bg-gray-500/75 dark:bg-gray-900/75" />
</Transition.Child>
<Transition.Child
as={Fragment}
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"
>
<Dialog.Panel
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}
</Dialog.Panel>
</Transition.Child>
</Dialog>
</Transition>
)
}
Version data entries
8 entries across 8 versions & 1 rubygems