Task + column scroll

src/pages/taskmanager/components/Column.tsx

@@ -1,15 +1,20 @@
 import { AddCircle, More } from "iconsax-react";
 import { type FC } from "react";
 
-const Column: FC = () => {
+type Props = {
+  children: React.ReactNode;
+};
+
+const Column: FC<Props> = (props: Props) => {
   return (
-    <div className="bg-[#F0F3F7] rounded-xl p-6 max-w-[290px] w-full">
+    <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">
+      <div className="flex justify-between items-center shrink-0">
         <div>{"برای انجام"}</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">
+      <div className="mt-5 flex gap-2 items-center shrink-0">
         <AddCircle size={18} color="#888888" />
         <div className="text-description text-[13px] mt-0.5">اضافه کردن تسک</div>
       </div>

src/pages/taskmanager/components/Task.tsx

@@ -0,0 +1,33 @@
+import { AttachCircle, Calendar, TickSquare } from "iconsax-react";
+import { type FC } from "react";
+
+const Task: FC = () => {
+  return (
+    <div className="bg-white rounded-lg p-2">
+      <div className="h-10 bg-yellow-500 rounded-lg"></div>
+      <div className="bg-[#FF76C2] h-5 px-3 flex items-center mt-2 text-[10px] text-white rounded-md w-fit">برچشب</div>
+      <div className="font-bold text-xs mt-2">اضافه شدن پیش نمایش</div>
+      <div className="mt-2 flex items-center gap-4 text-xs">
+        <div className="flex items-center gap-1 text-[10px]">
+          <Calendar size={16} color="#292D32" />
+          <div>۱ اردیبهشت - ۲۰ اردیبهشت</div>
+        </div>
+
+        <div className="flex gap-1">
+          <AttachCircle size={16} color="#292D32" />
+          <div>1</div>
+        </div>
+        <div className="flex gap-1">
+          <TickSquare size={16} color="#292D32" />
+          <div>1/5</div>
+        </div>
+      </div>
+
+      <div className="mt-2 flex justify-end">
+        <div className="size-6 bg-gray-200 rounded-full"></div>
+      </div>
+    </div>
+  );
+};
+
+export default Task;

src/pages/taskmanager/workspace.tsx

@@ -1,13 +1,20 @@
 import { type FC } from "react";
 import Column from "./components/Column";
 import HeaderWorkspace from "./components/HeaderWorkspace";
+import Task from "./components/Task";
 
 const Workspace: FC = () => {
   return (
-    <div className="bg-[#01347A] h-full rounded-[32px] overflow-hidden">
+    <div className="bg-[#01347A] h-full rounded-[32px] overflow-hidden flex flex-col">
       <HeaderWorkspace />
-      <div className="px-8 flex gap-7 mt-6">
+      <div className="px-8 flex gap-7 mt-6 flex-1 min-h-0 overflow-hidden pb-6">
-        <Column />
+        <Column>
+          <div className="flex flex-col gap-4">
+            <Task />
+            <Task />
+            <Task />
+          </div>
+        </Column>
       </div>
     </div>
   );