feat: add and edit task modal

src/components/ui/Button.tsx

@@ -7,18 +7,25 @@ const button = tv({
     color: {
       primary: "bg-[rgba(206,232,251,0.7)] hover:bg-[rgba(206,232,251,0.9)] active:bg-[rgba(206,232,251,0.9)]",
       secondary: "bg-[rgba(255,251,197,0.68)] hover:bg-[rgba(255,251,197,0.9)] active:bg-[rgba(255,251,197,0.9)]",
+      red: "bg-[rgba(251,194,199,0.53)] hover:bg-[rgba(251,194,199,0.9)] active:bg-[rgba(251,194,199,0.9)]",
     },
   },
 });
 
 interface ButtonProps {
-  color?: "primary" | "secondary";
+  color?: "primary" | "secondary" | "red";
   onClick?: () => void;
+  className?: string;
 }
 
-const Button: FunctionComponent<ButtonProps> = ({ children, onClick = () => {}, color = "primary" }) => {
+const Button: FunctionComponent<ButtonProps> = ({
+  children,
+  onClick = () => {},
+  color = "primary",
+  className = "",
+}) => {
   return (
-    <button type="button" class={button({ color: color })} onClick={onClick}>
+    <button type="button" class={button({ color: color, class: className })} onClick={onClick}>
       {children}
     </button>
   );

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;