feat: modal calendar in edit tasks

src/components/ui/Modal.tsx

@@ -7,35 +7,43 @@ interface ModalWindowProps {
   setIsOpen?: Dispatch<StateUpdater<boolean>>;
   onClose?: () => void;
   className?: string;
+  zIndex?: number;
 }
-const ModalWindow: FunctionComponent<ModalWindowProps> = ({ isOpen, children, setIsOpen, onClose, className = "" }) => {
+const ModalWindow: FunctionComponent<ModalWindowProps> = ({
+  isOpen,
+  children,
+  setIsOpen,
+  onClose,
+  className = "",
+  zIndex,
+}) => {
   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,
-        }
-      )}
-    >
+    isOpen && (
       <div
+        onClick={(e) => {
+          e.stopPropagation();
+          if (setIsOpen) setIsOpen(false);
+        }}
         class={cn(
-          "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",
-          className
+          "fixed top-0 left-0 z-50 flex h-screen w-screen cursor-pointer flex-col items-center justify-center bg-black/50"
         )}
-        onClick={(e) => e.stopPropagation()}
+        style={{ zIndex: zIndex }}
       >
-        {children}
+        <div
+          class={cn(
+            "flex h-[40rem] w-[95%] cursor-auto flex-col items-center justify-start rounded-[4rem] bg-white px-8 py-12 md:me-[20rem] md:h-[20rem] md:w-[65%] md:px-16",
+            className
+          )}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {children}
+        </div>
       </div>
-    </div>
+    )
   );
 };