Merge branch 'feature/manage-tasks' into 'main'

Feature/manage tasks

See merge request !14

src/components/todolist/TaskItem.jsx

@@ -18,26 +18,38 @@ export default function TaskItem({ task }) {
         setTasks(tasks.filter(task => task.id !== id));
     };
 
+    const formattedDate = task.dueDate
+        ? new Date(task.dueDate).toLocaleDateString()
+        : "No due date";
+
     return (
-        <li className="flex items-center space-x-4">
+        <li>
+            <div className="flex items-start p-4 border rounded-lg shadow-sm bg-white my-2 hover:shadow-md transition-shadow">
+                <div className="flex-shrink-0 pt-1">
                     <input
-                    type="checkbox" 
                         id={task.id}
+                        type="checkbox"
+                        className="h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                         checked={task.isCompleted}
                         onChange={onChange}
-                    className="w-5 h-5 text-blue-500 border-gray-300 rounded focus:ring-blue-500"
                     />
-                <label 
-                    htmlFor={task.id} 
-                    className={`text-lg ${task.isCompleted ? 'line-through text-gray-400' : ''}`}>
+                </div>
+
+                <div className="ml-3 flex-1">
+                    <h3 className={`text-base font-medium ${task.isCompleted ? 'text-gray-400 line-through' : 'text-gray-900'}`}>
                         {task.name}
-                </label>
+                    </h3>
+                    <p className={`text-sm mt-1 ${task.isCompleted ? 'text-gray-400' : 'text-gray-500'}`}>
+                        Due: {formattedDate}
+                    </p>
+                </div>
                 <button
                     onClick={() => onDelete(task.id)}
                     className="ml-auto p-1 rounded-full hover:bg-gray-200 focus:outline-none"
                 >
                     <TrashIcon className="w-5 h-5 text-red-500 hover:text-red-700" />
                 </button>
+            </div>
         </li>
     )
 }
\ No newline at end of file