feat: add and edit task modal

src/components/ui/Modal.tsx

@@ -0,0 +1,38 @@
+import { cn } from "@/utils/class-merge";
+import { FunctionComponent } from "preact";
+import { Dispatch, StateUpdater, useEffect } from "preact/hooks";
+
+interface ModalWindowProps {
+  isOpen?: boolean;
+  setIsOpen?: Dispatch<StateUpdater<boolean>>;
+  onClose?: () => void;
+}
+const ModalWindow: FunctionComponent<ModalWindowProps> = ({ isOpen, children, setIsOpen, onClose }) => {
+  useEffect(() => {
+    if (isOpen) return;
+    if (onClose) onClose();
+  }, [isOpen]);
+  return (
+    <div
+      onClick={(e) => {
+        e.stopPropagation();
+        if (setIsOpen) setIsOpen(false);
+      }}
+      class={cn(
+        "fixed top-0 left-0 z-50 flex h-screen w-screen cursor-pointer flex-col items-center justify-center bg-black/50",
+        {
+          hidden: !isOpen,
+        }
+      )}
+    >
+      <div
+        class="h-[40rem] w-[95%] cursor-auto rounded-[4rem] bg-white px-8 py-12 md:me-[20rem] md:h-[20rem] md:w-[65%] md:px-16"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default ModalWindow;