upd

2023-10-17 18:58:51 +05:00
parent 4c83933741
commit c5aa7bd524
15 changed files with 589 additions and 41 deletions
@@ -0,0 +1,31 @@
+import { Transition } from "react-transition-group";
+import useModalStore from "../stores/useModalStore";
+
+function ModalContainer() {
+  const [modal, setModal] = useModalStore((state) => [
+    state.modal,
+    state.setModal,
+  ]);
+
+  return (
+    <Transition
+      in={modal ? true : false}
+      timeout={150}
+      mountOnEnter
+      unmountOnExit
+    >
+      {(state) => (
+        <div
+          onClick={() => setModal(null)}
+          className={`min-h-screen p-8 absolute top-0 left-0 w-full flex justify-center items-center bg-black bg-opacity-30 overflow-auto cursor-pointer transition-opacity ${state}`}
+        >
+          <div onClick={(e) => e.stopPropagation()} className="cursor-default">
+            {modal}
+          </div>
+        </div>
+      )}
+    </Transition>
+  );
+}
+
+export default ModalContainer;