import React
import React
useEffect(() => {
fetchTasks();
}, []);
return (
<div className="p-6 max-w-lg mx-auto">
<h1 className="text-2xl font-bold mb-4">Task Manager</h1>
<div className="flex gap-2 mb-4">
<Input
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
placeholder="Enter a new task"
/>
<Button onClick={addTask}>Add</Button>
</div>
<div>
{tasks.map((task) => (
<Card key={task.id} className="mb-2 p-4 flex justify-between">
<span
className={
task.completed ? "line-through text-gray-500" : "text-black"
}
onClick={() => toggleTask(task.id)}
>
{task.title}
</span>
<Button onClick={() => deleteTask(task.id)}>Delete</Button>
</Card>
))}
</div>
</div>
);
}