function MainComponent() { const [todoList, setTodoList] = React.useState([ { id: 1, text: "Learn Next.js", completed: false }, { id: 2, text: "Build a new app", completed: false }, { id: 3, text: "Read TailwindCSS docs", completed: true } ]); const [taskText, setTaskText] = React.useState(''); const handleComplete = (id)=>{ setTodoList(todoList.map((task)=>task.id === id ? { ...task, completed: !task.completed } : task)); }; const addTask = ()=>{ if (taskText.trim() !== "") { const newTask = { id: todoList.length + 1, text: taskText, completed: false }; setTodoList([ ...todoList, newTask ]); setTaskText(''); } }; const handleTaskTextChange = (event)=>{ setTaskText(event.target.value); }; const todos = todoList.map((todo)=>/*#__PURE__*/ React.createElement("div", { key: todo.id, className: `flex items-center p-4 bg-[#f7f7f7] mb-2 rounded shadow ${todo.completed ? 'bg-opacity-50' : ''}`, __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: todo.completed, className: "mr-2 w-4 h-4", name: `todo-${todo.id}`, onChange: ()=>handleComplete(todo.id), __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: `flex-1 text-lg font-roboto ${todo.completed ? 'line-through text-gray-400' : 'text-gray-700'}`, __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, todo.text), /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeTask(todo.id), className: "text-xl ml-2", style: { cursor: 'pointer' }, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, "❌"))); const removeTask = (id)=>{ setTodoList(todoList.filter((task)=>task.id !== id)); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] mx-auto mt-10", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto mb-6 text-center text-[#121212]", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, "Todo List"), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Add a new task...", className: "w-full p-2 border rounded-l text-lg font-roboto text-gray-700", name: "new-todo", value: taskText, onChange: handleTaskTextChange, onKeyDown: (event)=>{ if (event.key === 'Enter') addTask(); }, __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: addTask, className: "bg-[#4CAF50] text-white p-2 rounded-r", style: { cursor: 'pointer' }, __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "➕")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, todos)); }