From 6d22fc9e1e8eebc2588f05c69e54f3e52cfdd9aa Mon Sep 17 00:00:00 2001
From: Rock3r <kisrocker20@gmail.com>
Date: Mon, 27 Apr 2026 14:22:56 +0200
Subject: [PATCH] refactor(task): componentize task item and implement delete
 and toggle logic

---
 src/App.tsx                    | 20 ++++++++++++++++++--
 src/components/TaskItem.tsx    | 23 +++++++++++++++++++++++
 src/{assets => }/types/task.ts |  0
 3 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 src/components/TaskItem.tsx
 rename src/{assets => }/types/task.ts (100%)

diff --git a/src/App.tsx b/src/App.tsx
index 87342c6..e9611f8 100644
--- a/src/App.tsx
+++ b/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>
         )}
diff --git a/src/components/TaskItem.tsx b/src/components/TaskItem.tsx
new file mode 100644
index 0000000..b907671
--- /dev/null
+++ b/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>
+    );
+};
diff --git a/src/assets/types/task.ts b/src/types/task.ts
similarity index 100%
rename from src/assets/types/task.ts
rename to src/types/task.ts