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.
69 lines
2.2 KiB
69 lines
2.2 KiB
import { Fragment, useRef, useState, Children } from "react";
|
|
import { Dialog, Transition } from "@headlessui/react";
|
|
|
|
function classNames(...classes) {
|
|
return classes.filter(Boolean).join(" ");
|
|
}
|
|
|
|
const Modal = ({ Toggle, Content }) => {
|
|
const [open, setOpen] = useState(false);
|
|
const cancelButtonRef = useRef(null);
|
|
|
|
return (
|
|
<>
|
|
<Toggle open={open} setOpen={setOpen} />
|
|
<Transition.Root show={open} as={Fragment}>
|
|
<Dialog
|
|
as="div"
|
|
className="relative z-10"
|
|
initialFocus={cancelButtonRef}
|
|
onClose={setOpen}
|
|
>
|
|
<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-theme-900/90 transition-opacity" />
|
|
</Transition.Child>
|
|
|
|
<div className="fixed z-10 inset-0 overflow-y-auto">
|
|
<div className="flex items-center justify-center min-h-full">
|
|
<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 rounded-lg shadow-xl transform transition-all my-8 max-w-lg w-full">
|
|
<Content open={open} setOpen={setOpen} />
|
|
</Dialog.Panel>
|
|
</Transition.Child>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</Transition.Root>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const ModalToggle = ({ open, setOpen, children }) => (
|
|
<div onClick={() => setOpen(!open)}>{children}</div>
|
|
);
|
|
|
|
const ModalContent = ({ open, setOpen, children }) => (
|
|
<div className="body">{children}</div>
|
|
);
|
|
|
|
Modal.Toggle = ModalToggle;
|
|
Modal.Content = ModalContent;
|
|
|
|
export default Modal;
|