({
isOpen,
closeModal,
children,
size = "fit",
className,
})
| 42 | * ``` |
| 43 | */ |
| 44 | const Modal: FC<ModalProps> = ({ |
| 45 | isOpen, |
| 46 | closeModal, |
| 47 | children, |
| 48 | size = "fit", |
| 49 | className, |
| 50 | }) => { |
| 51 | const sizeMap: Record<Size, string> = { |
| 52 | sm: "max-w-sm", |
| 53 | md: "max-w-md", |
| 54 | lg: "max-w-lg", |
| 55 | xl: "max-w-xl", |
| 56 | fit: "max-w-fit", |
| 57 | }; |
| 58 | |
| 59 | return ( |
| 60 | <> |
| 61 | <Transition appear show={isOpen} as={Fragment}> |
| 62 | <Dialog as="div" className="absolute z-10" onClose={closeModal}> |
| 63 | <Transition.Child |
| 64 | as={Fragment} |
| 65 | enter="ease-out duration-300" |
| 66 | enterFrom="opacity-0" |
| 67 | enterTo="opacity-100" |
| 68 | leave="ease-in duration-200" |
| 69 | leaveFrom="opacity-100" |
| 70 | leaveTo="opacity-0" |
| 71 | > |
| 72 | <div className="fixed inset-0 bg-black/25" /> |
| 73 | </Transition.Child> |
| 74 | |
| 75 | <div className="fixed inset-0 overflow-y-auto"> |
| 76 | <div className="flex min-h-full items-center justify-center p-4 text-center"> |
| 77 | <Transition.Child |
| 78 | as={Fragment} |
| 79 | enter="ease-out duration-300" |
| 80 | enterFrom="opacity-0 scale-95" |
| 81 | enterTo="opacity-100 scale-100" |
| 82 | leave="ease-in duration-200" |
| 83 | leaveFrom="opacity-100 scale-100" |
| 84 | leaveTo="opacity-0 scale-95" |
| 85 | > |
| 86 | <Dialog.Panel |
| 87 | className={clsx( |
| 88 | "z-100 absolute flex w-full transform flex-col rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all", |
| 89 | sizeMap[size], |
| 90 | className, |
| 91 | )} |
| 92 | > |
| 93 | {children} |
| 94 | </Dialog.Panel> |
| 95 | </Transition.Child> |
| 96 | </div> |
| 97 | </div> |
| 98 | </Dialog> |
| 99 | </Transition> |
| 100 | </> |
| 101 | ); |
nothing calls this directly
no outgoing calls
no test coverage detected