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

src/App.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react"
-import type { Task } from "./assets/types/task";
+import type { Task } from "./types/task";
+import { TaskItem } from "./components/TaskItem";
 
 function App() {
   const [tasks, setTasks] = useState<Task[]>([]);
@@ -20,6 +21,16 @@ function App() {
     setInputValue('');
   };
 
+  const deleteTask = (id: number) => {
+    setTasks(tasks.filter(task => task.id !== id));
+  }
+
+  const toggleTask = (id: number) => {
+    setTasks(tasks.map(task => 
+      task.id === id ? { ...task, completed: !task.completed} : task
+    ));
+  };
+
   return (
     <div className="container">
       <h1>SmartX Task Manager</h1>
@@ -38,7 +49,12 @@ function App() {
         ) : (
           <ul>
             {tasks.map(task => (
-              <li key={task.id}>{task.title}</li>
+              <TaskItem
+                key={task.id}
+                task={task}
+                onDelete={deleteTask}
+                onToggle={toggleTask}
+              />
             ))}
           </ul>
         )}

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>
+    );
+};