80 lines
3.8 KiB
TypeScript
80 lines
3.8 KiB
TypeScript
import { Fragment } from 'react';
|
|
import { Dialog, Transition } from '@headlessui/react';
|
|
import { XMarkIcon } from '@heroicons/react/24/outline';
|
|
|
|
interface ModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
title: string;
|
|
children: React.ReactNode;
|
|
maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
|
|
}
|
|
|
|
export default function Modal({ isOpen, onClose, title, children, maxWidth = 'md' }: ModalProps) {
|
|
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',
|
|
'3xl': 'sm:max-w-3xl',
|
|
'4xl': 'sm:max-w-4xl',
|
|
'5xl': 'sm:max-w-5xl',
|
|
}[maxWidth];
|
|
|
|
return (
|
|
<Transition.Root show={isOpen} as={Fragment}>
|
|
<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-zinc-900/75 backdrop-blur-sm transition-opacity" />
|
|
</Transition.Child>
|
|
|
|
<div className="fixed inset-0 z-10 overflow-y-auto">
|
|
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
|
<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={`relative transform overflow-hidden rounded-2xl bg-white dark:bg-zinc-900 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 w-full ${maxWidthClass} sm:p-6 border border-zinc-200 dark:border-zinc-800`}>
|
|
<div className="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
|
|
<button
|
|
type="button"
|
|
className="rounded-md bg-white dark:bg-zinc-900 text-zinc-400 hover:text-zinc-500 focus:outline-none"
|
|
onClick={onClose}
|
|
>
|
|
<span className="sr-only">Fechar</span>
|
|
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
<div className="sm:flex sm:items-start w-full">
|
|
<div className="mt-3 text-center sm:mt-0 sm:text-left w-full">
|
|
<Dialog.Title as="h3" className="text-xl font-bold leading-6 text-zinc-900 dark:text-white mb-6">
|
|
{title}
|
|
</Dialog.Title>
|
|
<div className="mt-2">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Dialog.Panel>
|
|
</Transition.Child>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</Transition.Root>
|
|
);
|
|
}
|