upd

src/components/ModalContainer.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect } from "react";
+import useModalStore from "../stores/useModalStore";
+import "./ModalContainer.css";
+
+interface ModalContainerProps {
+  className?: string;
+}
+
+function ModalContainer({ className }: ModalContainerProps) {
+  const [modal, setModal] = useModalStore((state) => [
+    state.modal,
+    state.setModal,
+  ]);
+
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.code === "Escape") {
+        setModal(null);
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  return (
+    <div
+      onClick={() => setModal(null)}
+      className={[
+        "absolute w-full min-h-screen top-0 left-0 flex flex-col justify-center items-center p-8 bg-black bg-opacity-75 transition-opacity cursor-pointer",
+        className,
+      ].join(" ")}
+    >
+      <div onClick={(e) => e.stopPropagation()} className="cursor-default">
+        {modal}
+      </div>
+    </div>
+  );
+}
+
+export default ModalContainer;