You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
import { Fragment, PropsWithChildren } from 'react'; import { Dialog, Transition } from '@headlessui/react';
export default function Modal({ children, show = false, maxWidth = '2xl', closeable = true, onClose = () => {}, styling = 'def', className = '', }: PropsWithChildren<{ show: boolean; maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'; closeable?: boolean; onClose: CallableFunction; styling?: 'def' | 'success' | 'error' | 'info' | 'warning'; className?: string; }>) { 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];
const stylingClass = { 'def': 'bg-neutral-white', 'success': 'bg-success-background border-success-border', 'error': 'bg-error-background border-error-border', 'info': 'bg-info-background border-info-border', 'warning': 'bg-warning-background border-warning-border', }[styling];
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-neutral-0 opacity-50" /> </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 border-4 rounded-lg overflow-hidden shadow-xl items-center justify-center text-center transform transition-all sm:w-full sm:mx-auto ${maxWidthClass} ${stylingClass} ${className}`} > {children} </Dialog.Panel> </Transition.Child> </Dialog> </Transition> ); }
|