first public source commit

src/components/modal.jsx

@@ -0,0 +1,68 @@
+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;