init

2025-04-08 23:22:18 +05:00
commit 43e711d393
39 changed files with 1793 additions and 0 deletions
@@ -0,0 +1,92 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useRef } from "react";
+import useModalStore from "../stores/useModalStore";
+import { AnimatePresence, motion } from "motion/react";
+import CloseIcon from "./icons/CloseIcon";
+import Button from "./ui/Button";
+import { clsx as cn } from "clsx";
+
+function ModalContainer() {
+  const { modal, setModal } = useModalStore();
+  const divRef = useRef<HTMLDivElement>(null);
+  const backdropRef = useRef<HTMLDivElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  function handleResize() {
+    if (!popoverRef.current) return;
+
+    if (divRef.current!.clientHeight > popoverRef.current!.clientHeight) {
+      backdropRef.current!.style.height = `${divRef.current!.clientHeight}px`;
+    } else {
+      backdropRef.current!.style.height = `100%`;
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key !== "Escape") return;
+    setModal(null);
+  }
+
+  useEffect(() => {
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("keydown", handleKeydown);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("keydown", handleKeydown);
+    };
+  }, []);
+
+  return (
+    <AnimatePresence>
+      {modal && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="h-full"
+        >
+          <div
+            ref={popoverRef}
+            className={cn(
+              "fixed inset-0 bg-black/70 overflow-y-auto flex flex-col justify-center items-center",
+            //   position === "center" && "items-center",
+            //   position === "right" && "items-end"
+            )}
+          >
+            <div className="max-h-full">
+              <div ref={divRef} className="p-[0.972vw]">
+                <div
+                  ref={backdropRef}
+                  className="absolute inset-0 cursor-pointer"
+                  onClick={() => setModal(null)}
+                />
+                <div
+                  ref={containerRef}
+                  className="relative w-full"
+                  // style={{
+                  //   height: `calc(${backdropRef.current?.clientHeight}px - 0.972vw * 2)`,
+                  // }}
+                >
+                  {modal}
+                  <Button
+                    onlyIcon
+                    className="absolute top-[1.667vw] right-[1.667vw] p-[0.556vw] !rounded-full bg-[#F9F9F9]"
+                    onClick={() => setModal(null)}
+                  >
+                    <span className="w-[1.389vw] h-[1.389vw] text-black">
+                      <CloseIcon />
+                    </span>
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export default ModalContainer;