drag and drop

src/pages/taskmanager/components/Column.tsx

@@ -1,23 +1,82 @@
 import { Add, AddCircle, CloseCircle, More } from "iconsax-react";
-import { Children, useState, type FC, type ReactNode } from "react";
+import { useState, type FC } from "react";
+import type { Column as ColumnType, Task as TaskType } from "../types";
+import Task from "./Task";
 
 type Props = {
-  title: string;
-  children?: ReactNode;
+  column: ColumnType;
+  tasks: TaskType[];
+  draggedTaskId: string | null;
+  onDragStart: (taskId: string) => void;
+  onDragEnd: () => void;
+  onDrop: (columnId: string, index: number) => void;
 };
 
-const Column: FC<Props> = ({ title, children }) => {
+const Column: FC<Props> = ({
+  column,
+  tasks,
+  draggedTaskId,
+  onDragStart,
+  onDragEnd,
+  onDrop,
+}) => {
   const [isAdding, setIsAdding] = useState(false);
-  const hasTasks = Children.count(children) > 0;
+  const [isDragOver, setIsDragOver] = useState(false);
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+      setIsDragOver(false);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent, index: number) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+    onDrop(column.id, index);
+  };
 
   return (
-    <div className="bg-[#F0F3F7] rounded-xl p-6 max-w-[310px] w-full flex flex-col self-start">
+    <div
+      className={`bg-[#F0F3F7] rounded-xl p-6 max-w-[310px] w-full flex flex-col self-start transition-colors ${
+        isDragOver ? "ring-2 ring-primary/40" : ""
+      }`}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={(e) => handleDrop(e, tasks.length)}
+    >
       <div className="flex justify-between items-center shrink-0">
-        <div className="font-bold text-sm">{title}</div>
+        <div className="font-bold text-sm">{column.title}</div>
         <More size={20} color="black" />
       </div>
 
-      <div className={hasTasks ? "mt-5" : ""}>{children}</div>
+      {tasks.length > 0 && (
+        <div className="mt-5 flex flex-col gap-4">
+          {tasks.map((task, index) => (
+            <div
+              key={task.id}
+              onDragOver={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+              onDrop={(e) => handleDrop(e, index)}
+            >
+              <Task
+                task={task}
+                isDragging={draggedTaskId === task.id}
+                onDragStart={onDragStart}
+                onDragEnd={onDragEnd}
+              />
+            </div>
+          ))}
+        </div>
+      )}
 
       {isAdding ? (
         <div className="mt-5 shrink-0 flex flex-col gap-3">