responsive and move to dnd

src/pages/taskmanager/components/Task.tsx

@@ -1,39 +1,35 @@
 import { AttachCircle, Calendar, TickSquare } from "iconsax-react";
-import { useRef, type FC } from "react";
+import { useEffect, useRef, type FC } from "react";
 import type { Task as TaskType } from "../types";
 
 type Props = {
   task: TaskType;
   isDragging?: boolean;
-  onDragStart: (task: TaskType) => void;
-  onDragEnd: () => void;
   onClick?: (task: TaskType) => void;
 };
 
-const Task: FC<Props> = ({ task, isDragging, onDragStart, onDragEnd, onClick }) => {
-  const hasDraggedRef = useRef(false);
+const Task: FC<Props> = ({ task, isDragging, onClick }) => {
+  const suppressClickRef = useRef(false);
+
+  useEffect(() => {
+    if (isDragging) {
+      suppressClickRef.current = true;
+    }
+  }, [isDragging]);
 
   const handleClick = () => {
-    if (hasDraggedRef.current) return;
+    if (suppressClickRef.current) {
+      suppressClickRef.current = false;
+      return;
+    }
     onClick?.(task);
   };
 
   return (
     <div
-      draggable
-      onDragStart={() => {
-        hasDraggedRef.current = true;
-        onDragStart(task);
-      }}
-      onDragEnd={() => {
-        onDragEnd();
-        requestAnimationFrame(() => {
-          hasDraggedRef.current = false;
-        });
-      }}
       onClick={handleClick}
-      className={`bg-white rounded-lg p-2 cursor-grab active:cursor-grabbing transition-opacity ${
-        isDragging ? "opacity-40" : ""
+      className={`bg-white rounded-lg p-2 cursor-grab active:cursor-grabbing transition-opacity touch-manipulation ${
+        isDragging ? "opacity-40 shadow-lg" : ""
       }`}
     >
       {task.color ? <div className="h-10 rounded-lg" style={{ backgroundColor: task.color }} /> : null}