drag and drop

src/pages/taskmanager/components/Task.tsx

@@ -1,25 +1,44 @@
 import { AttachCircle, Calendar, TickSquare } from "iconsax-react";
 import { type FC } from "react";
+import type { Task as TaskType } from "../types";
 
-const Task: FC = () => {
+type Props = {
+  task: TaskType;
+  isDragging?: boolean;
+  onDragStart: (taskId: string) => void;
+  onDragEnd: () => void;
+};
+
+const Task: FC<Props> = ({ task, isDragging, onDragStart, onDragEnd }) => {
   return (
-    <div className="bg-white rounded-lg p-2">
+    <div
+      draggable
+      onDragStart={() => onDragStart(task.id)}
+      onDragEnd={onDragEnd}
+      className={`bg-white rounded-lg p-2 cursor-grab active:cursor-grabbing transition-opacity ${
+        isDragging ? "opacity-40" : ""
+      }`}
+    >
       <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="bg-[#FF76C2] h-5 px-3 flex items-center mt-2 text-[10px] text-white rounded-md w-fit">
+        {task.tag}
+      </div>
+      <div className="font-bold text-xs mt-2">{task.title}</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>{task.dateRange}</div>
         </div>
 
         <div className="flex gap-1">
           <AttachCircle size={16} color="#292D32" />
-          <div>1</div>
+          <div>{task.attachments}</div>
         </div>
         <div className="flex gap-1">
           <TickSquare size={16} color="#292D32" />
-          <div>1/5</div>
+          <div>
+            {task.checklistDone}/{task.checklistTotal}
+          </div>
         </div>
       </div>