add task design

src/pages/taskmanager/components/Column.tsx

@@ -1,5 +1,5 @@
-import { AddCircle, More } from "iconsax-react";
-import { Children, type FC, type ReactNode } from "react";
+import { Add, AddCircle, CloseCircle, More } from "iconsax-react";
+import { Children, useState, type FC, type ReactNode } from "react";
 
 type Props = {
   title: string;
@@ -7,6 +7,7 @@ type Props = {
 };
 
 const Column: FC<Props> = ({ title, children }) => {
+  const [isAdding, setIsAdding] = useState(false);
   const hasTasks = Children.count(children) > 0;
 
   return (
@@ -18,10 +19,42 @@ const Column: FC<Props> = ({ title, children }) => {
 
       <div className={`overflow-y-auto flex-1 min-h-0${hasTasks ? " mt-5" : ""}`}>{children}</div>
 
-      <button type="button" className="mt-5 flex gap-2 items-center shrink-0 cursor-pointer">
-        <AddCircle size={18} color="#888888" />
-        <span className="text-description text-[13px] mt-0.5">اضافه کردن تسک</span>
-      </button>
+      {isAdding ? (
+        <div className="mt-5 shrink-0 flex flex-col gap-3">
+          <input
+            type="text"
+            placeholder="عنوان تسک"
+            className="w-full bg-white rounded-lg px-3 py-2.5 text-sm outline-none"
+            autoFocus
+          />
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              className="flex items-center gap-2 bg-black text-white text-[13px] rounded-full px-4 py-2 cursor-pointer"
+            >
+              <span>اضافه کردن</span>
+              <Add size={18} color="white" />
+            </button>
+            <button
+              type="button"
+              onClick={() => setIsAdding(false)}
+              className="cursor-pointer"
+              aria-label="انصراف"
+            >
+              <CloseCircle size={22} color="#888888" variant="Bold" />
+            </button>
+          </div>
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={() => setIsAdding(true)}
+          className="mt-5 flex gap-2 items-center shrink-0 cursor-pointer"
+        >
+          <AddCircle size={18} color="#888888" />
+          <span className="text-description text-[13px] mt-0.5">اضافه کردن تسک</span>
+        </button>
+      )}
     </div>
   );
 };