fix(task): replace Date.now with nanoid for unique keys and update task interface

src/App.tsx

@@ -22,7 +22,7 @@ function App() {
           value={inputValue}
           onChange={(e) => setInputValue(e.target.value)}
          />
-         <button onClick={() => addTask(inputValue)}>Add</button>
+         <button onClick={() => { addTask(inputValue); setInputValue(''); }}>Add</button>
       </div>
       <div className="task-list">
         {tasks.length === 0 ? (

src/components/TaskItem.tsx

@@ -3,8 +3,8 @@ import type { Task } from "../types/task";
 
 interface TaskItemProps {
     task: Task;
-    onDelete: (id: number) => void;
-    onToggle: (id: number) => void;
+    onDelete: (id: string) => void;
+    onToggle: (id: string) => void;
 }
 
 export const TaskItem = memo(({ task, onDelete, onToggle }: TaskItemProps) => {

src/hooks/useTasks.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import type { Task } from "../types/task";
+import { nanoid } from "nanoid";
 
 export const useTasks = () => {
     const [tasks, setTasks] = useState<Task[]>(() => {
@@ -15,26 +16,24 @@ export const useTasks = () => {
         if (title.trim() === '') return;
 
         const newTask: Task = {
-            id: Date.now(),
-            title: title,
+            id: nanoid(),
+            title,
             completed: false,
             createdAt: new Date().toISOString()
         };
-
-        setTasks([...tasks, newTask]);
-
+        
         setTasks(prev => [...prev, newTask]);
     };
 
-    const deleteTask = useCallback((id: number) => {
-        setTasks(tasks.filter(task => task.id !== id));
+    const deleteTask = useCallback((id: string) => {
+        setTasks(prev => prev.filter(task => task.id !== id));
     }, []);
 
-    const toggleTask = useCallback((id: number) => {
-        setTasks(tasks.map(task =>
+    const toggleTask = useCallback((id: string) => {
+        setTasks(prev => prev.map(task =>
             task.id === id ? { ...task, completed: !task.completed } : task
         ));
     }, []);
-    
+
     return { tasks, addTask, deleteTask, toggleTask };
 };

src/types/task.ts

@@ -1,5 +1,5 @@
 export interface Task {
-    id: number;
+    id: string;
     title: string;
     completed: boolean;
     createdAt: string;