import React, { useState } from "react"; interface Item { id: number; text: string; completed: boolean; } const TodoList: React.FC = () => { const [todos, setTodos] = useState<Item[]>([]); const [newTodo, setNewTodo] = useState<string>(""); const handleAdd = () => { if (!newTodo.trim()) return alert("Please enter some text"); setTodos([ ...todos, { id: todos.length + 1, text: newTodo, completed: false }, ]); setNewTodo(""); }; const handleCheckList = (id: number) => { setTodos((prevTodos) => { return prevTodos.map((item) => item.id === id ? { ...item, completed: !item.completed } : item ); }); }; return ( <div className="max-w-md mx-auto p-6 bg-white rounded-md shadow-md"> <header className="text-2xl font-semibold mb-4 text-center">To-Do List</header> <main> <div className="flex mb-4"> <input className="flex-1 py-2 px-4 border border-gray-300 rounded-l-md focus:outline-none focus:border-blue-500" type="text" placeholder="Add Item" value={newTodo} onChange={(e) => setNewTodo(e.target.value)} /> <button className="py-2 px-4 bg-blue-500 text-white rounded-r-md hover:bg-blue-600 focus:outline-none" onClick={handleAdd} > Add </button> </div> <ul className="text-center"> {todos.map((item) => ( <li key={item.id} className={`py-2 px-4 mb-2 border border-gray-300 rounded-md cursor-pointer transition ${ item.completed ? "line-through" : "" }`} onClick={() => handleCheckList(item.id)} > {item.text} </li> ))} </ul> </main> </div> ); }; export default TodoList;