🚧 💄 feat: added dragganble Icon and hover

app/Components/TasksApp/TaskList.tsx

@@ -1,3 +1,4 @@
+import DragIcon from "@/app/_lib/icons/DragIcon";
 import TrashIcon from "@/app/_lib/icons/TrashIcon";
 import { useState } from "react";
 
@@ -12,10 +13,10 @@ export default function TaskList({
 }) {
   return (
     <ul
-      className="lg:w-1/2 w-full mt-24 flex justify-center flex-col"
+      className="lg:w-3/4 w-full mt-24 flex justify-center flex-col"
     >
       {[...tasks].reverse().map((task: any) => (
-        <li className="flex flex-row w-full my-2" key={task.id}>
+        <li className="flex flex-row w-full p-2 hover:bg-base-200 rounded-md" key={task.id}>
           <Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
         </li>
       ))}
@@ -97,7 +98,9 @@ function Task({
     );
   }
   return (
-    <label className="w-full grid grid-cols-5 grid-rows-1">
+    <label className="w-full grid grid-cols-6 grid-rows-1">
+      <DragIcon/>
+
       <input
         className="checkbox self-center checkbox-lg ml-4 lg:ml-0"
         type="checkbox"

app/_lib/icons/DragIcon.tsx

@@ -0,0 +1,14 @@
+export default function DragIcon() {
+    return (
+      <div className="flex flex-row">
+        {/* prettier-ignore */}
+        <svg className="w-6 h-6 justify-start self-center" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
+    </svg>
+        {/* prettier-ignore */}
+        <svg className="w-6 h-10 justify-start self-center" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+    </svg>
+      </div>
+    );
+  }