function MainComponent() { const [todos, setTodos] = React.useState([ { id: 1, text: 'Finish the report', isCompleted: false }, { id: 2, text: 'Clean the house', isCompleted: false } ]); const [inputValue, setInputValue] = React.useState(''); const handleInputChange = (e)=>{ setInputValue(e.target.value); }; const handleSubmit = (e)=>{ e.preventDefault(); if (!inputValue.trim()) return; const newTodo = { id: Date.now(), text: inputValue, isCompleted: false }; setTodos([ ...todos, newTodo ]); setInputValue(''); }; const handleComplete = (todoId)=>{ const updatedTodos = todos.map((todo)=>{ if (todo.id === todoId) { return { ...todo, isCompleted: !todo.isCompleted }; } return todo; }); setTodos(updatedTodos); }; const handleDelete = (todoId)=>{ const updatedTodos = todos.filter((todo)=>todo.id !== todoId); setTodos(updatedTodos); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-lg mx-auto p-4 bg-[#f3f4f6] min-h-screen", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-[#333] font-bold font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, "Todo App"), /*#__PURE__*/ React.createElement("form", { className: "flex items-center mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "todoInput", value: inputValue, onChange: handleInputChange, placeholder: "Add new todo", className: "flex-1 p-2 border border-[#ddd] rounded-l", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-[#3182ce] text-white rounded-r", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-plus", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("ul", { className: "list-none", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, todos.map((todo)=>/*#__PURE__*/ React.createElement("li", { key: todo.id, className: `flex items-center justify-between bg-white p-2 border-b border-[#ddd] ${todo.isCompleted ? "line-through text-gray-500" : ""}`, __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, todo.text), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleComplete(todo.id), className: "text-[#3182ce] mr-2", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-check", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDelete(todo.id), className: "text-[#e53e3e]", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-trash", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }))))))); }