refactor(task): componentize task item and implement delete and toggle logic

src/components/TaskItem.tsx

@@ -0,0 +1,23 @@
+import type { Task } from "../types/task";
+
+interface TaskItemProps {
+    task: Task;
+    onDelete: (id: number) => void;
+    onToggle: (id: number) => void;
+}
+
+export const TaskItem = ({ task, onDelete, onToggle }: TaskItemProps) => {
+    return (
+        <li className="{`task-item ${task.completed ? 'completed' : ''}`}">
+            <input 
+                type="checkbox" 
+                checked={task.completed}
+                onChange={() => onToggle(task.id)}
+            />
+            <span style={{ textDecoration: task.completed ? 'line-through' : 'none'}}>
+                {task.title}
+            </span>
+            <button onClick={() => onDelete(task.id)}>Delete</button>
+        </li>
+    );
+};