moving v2 to top level

src/components/Modal.tsx

@@ -0,0 +1,73 @@
+"use client";
+import React, { ReactNode, useCallback, useMemo, useState } from "react";
+
+export interface ModalControl {
+  isOpen: boolean;
+  openModal: () => void;
+  closeModal: () => void;
+}
+
+export function useModal() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const openModal = useCallback(() => setIsOpen(true), []);
+  const closeModal = useCallback(() => setIsOpen(false), []);
+
+  return useMemo(
+    () => ({
+      isOpen,
+      openModal,
+      closeModal,
+    }),
+    [closeModal, isOpen, openModal]
+  );
+}
+
+export default function Modal({
+  children,
+  buttonText,
+  buttonClass = "",
+  modalWidth = "w-1/3",
+  modalControl,
+}: {
+  children: (props: { closeModal: () => void }) => ReactNode;
+  buttonText: string;
+  buttonClass?: string;
+  modalWidth?: string;
+  modalControl: ModalControl;
+}) {
+  return (
+    <>
+      <button onClick={modalControl.openModal} className={buttonClass}>
+        {buttonText}
+      </button>
+
+      <div
+        className={
+          " fixed inset-0 flex items-center justify-center transition-all duration-400 h-screen " +
+          " bg-black" +
+          (modalControl.isOpen
+            ? " bg-opacity-50  z-50  "
+            : " bg-opacity-0  -z-50  ")
+        }
+        onClick={modalControl.closeModal}
+      >
+        <div
+          onClick={(e) => {
+            // e.preventDefault();
+            e.stopPropagation();
+          }}
+          className={
+            ` bg-slate-800 p-6 rounded-lg shadow-lg ` +
+            modalWidth +
+            ` transition-all duration-400 ` +
+            ` ${modalControl.isOpen ? "opacity-100" : "opacity-0"}`
+          }
+        >
+          {modalControl.isOpen &&
+            children({ closeModal: modalControl.closeModal })}
+        </div>
+      </div>
+    </>
+  );
+}