Columnn page

src/pages/taskmanager/components/Column.tsx

@@ -1,23 +1,27 @@
 import { AddCircle, More } from "iconsax-react";
-import { type FC } from "react";
+import { Children, type FC, type ReactNode } from "react";
 
 type Props = {
-  children: React.ReactNode;
+  title: string;
+  children?: ReactNode;
 };
 
-const Column: FC<Props> = (props: Props) => {
+const Column: FC<Props> = ({ title, children }) => {
+  const hasTasks = Children.count(children) > 0;
+
   return (
     <div className="bg-[#F0F3F7] rounded-xl p-6 max-w-[310px] w-full h-full flex flex-col min-h-0">
       <div className="flex justify-between items-center shrink-0">
-        <div>{"برای انجام"}</div>
+        <div className="font-bold text-sm">{title}</div>
         <More size={20} color="black" />
       </div>
-      <div className="mt-5 overflow-y-auto flex-1 min-h-0">{props.children}</div>
 
-      <div className="mt-5 flex gap-2 items-center shrink-0">
+      <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" />
-        <div className="text-description text-[13px] mt-0.5">اضافه کردن تسک</div>
-      </div>
+        <span className="text-description text-[13px] mt-0.5">اضافه کردن تسک</span>
+      </button>
     </div>
   );
 };

src/pages/taskmanager/workspace.tsx

@@ -8,13 +8,15 @@ const Workspace: FC = () => {
     <div className="bg-[#01347A] h-full rounded-[32px] overflow-hidden flex flex-col">
       <HeaderWorkspace />
       <div className="px-8 flex gap-7 mt-6 flex-1 min-h-0 overflow-hidden pb-6">
-        <Column>
+        <Column title="برای انجام">
           <div className="flex flex-col gap-4">
             <Task />
             <Task />
             <Task />
           </div>
         </Column>
+
+        <Column title="درحال انجام" />
       </div>
     </div>
   );