function MainComponent() { const [todos, setTodos] = React.useState([ { id: 1, text: "Sample Todo 1", completed: false }, { id: 2, text: "Sample Todo 2", completed: false } ]); const [newTodo, setNewTodo] = React.useState(""); const handleAddTodo = (e)=>{ e.preventDefault(); if (newTodo.trim()) { setTodos([ ...todos, { id: Date.now(), text: newTodo, completed: false } ]); setNewTodo(""); } }; const handleToggleTodo = (id)=>{ setTodos(todos.map((todo)=>todo.id === id ? { ...todo, completed: !todo.completed } : todo)); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-600 w-full p-4 text-center", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-white text-3xl", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Todo List App")), /*#__PURE__*/ React.createElement("main", { className: "flex-grow p-6 w-full max-w-[600px]", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow-md rounded-md", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex mb-4", onSubmit: handleAddTodo, __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "newTodo", value: newTodo, onChange: (e)=>setNewTodo(e.target.value), placeholder: "Add a new todo...", className: "w-full p-2 border rounded-l-md font-roboto text-gray-700", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-r-md font-roboto px-4", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Add")), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, todos.map((todo)=>/*#__PURE__*/ React.createElement("li", { key: todo.id, className: "flex items-center p-2 bg-gray-100 rounded-md shadow", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `todo${todo.id}`, checked: todo.completed, onChange: ()=>handleToggleTodo(todo.id), className: "mr-2", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `font-roboto ${todo.completed ? 'line-through' : ''}`, __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, todo.text)))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-blue-600 w-full p-4 text-center", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-white", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "© 2023 Todo List App"))); }