64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
|
import type { FunctionComponent, MutableRefObject } from "react";
|
||
|
|
import { Fragment } from "react";
|
||
|
|
import { Transition, Dialog } from "@headlessui/react";
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
initialFocus?: MutableRefObject<HTMLElement | null> | undefined;
|
||
|
|
isOpen: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
const Modal: FunctionComponent<Props> = ({ children, initialFocus, isOpen, onClose }) => {
|
||
|
|
return (
|
||
|
|
<Transition.Root show={isOpen} as={Fragment}>
|
||
|
|
<Dialog
|
||
|
|
className="fixed z-30 inset-0 overflow-y-auto"
|
||
|
|
initialFocus={initialFocus}
|
||
|
|
onClose={onClose}
|
||
|
|
open={isOpen}
|
||
|
|
static
|
||
|
|
>
|
||
|
|
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center md:block md:p-0">
|
||
|
|
<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"
|
||
|
|
>
|
||
|
|
<Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||
|
|
</Transition.Child>
|
||
|
|
|
||
|
|
{/* This element is to trick the browser into centering the modal contents. */}
|
||
|
|
<span className="hidden md:inline-block md:align-middle md:h-screen">
|
||
|
|
​
|
||
|
|
</span>
|
||
|
|
<Transition.Child
|
||
|
|
as={Fragment}
|
||
|
|
enter="ease-out duration-300"
|
||
|
|
enterFrom="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
|
||
|
|
enterTo="opacity-100 translate-y-0 md:scale-100"
|
||
|
|
leave="ease-in duration-200"
|
||
|
|
leaveFrom="opacity-100 translate-y-0 md:scale-100"
|
||
|
|
leaveTo="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
|
||
|
|
>
|
||
|
|
<div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all md:my-8 md:align-middle md:max-w-lg md:w-full md:p-6">
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
</Transition.Child>
|
||
|
|
</div>
|
||
|
|
</Dialog>
|
||
|
|
</Transition.Root>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export const ModalTitle: FunctionComponent = ({ children }) => (
|
||
|
|
<Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
|
||
|
|
{children}
|
||
|
|
</Dialog.Title>
|
||
|
|
);
|
||
|
|
|
||
|
|
export default Modal;
|