function MainComponent() { const [todos, setTodos] = React.useState([ { id: 1, text: 'Sample Todo 1' }, { id: 2, text: 'Sample Todo 2' }, { id: 3, text: 'Sample Todo 3' } ]); const [newTodo, setNewTodo] = React.useState(''); const handleAddTodo = (e)=>{ e.preventDefault(); if (newTodo.trim() !== '') { setTodos([ ...todos, { id: Date.now(), text: newTodo } ]); setNewTodo(''); } }; const handleDeleteTodo = (id)=>{ setTodos(todos.filter((todo)=>todo.id !== id)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white rounded-lg shadow-md p-4 mt-6", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto mb-4 text-center", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Todo List"), /*#__PURE__*/ React.createElement("form", { className: "mb-4", onSubmit: handleAddTodo, __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "newTodo", className: "w-full px-3 py-2 border rounded-md text-sm", placeholder: "Add new task", value: newTodo, onChange: (e)=>setNewTodo(e.target.value), __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-2 w-full bg-blue-500 text-white py-2 rounded-md font-bold font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Add Task")), /*#__PURE__*/ React.createElement("ul", { className: "divide-y divide-gray-200", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, todos.map((todo)=>/*#__PURE__*/ React.createElement("li", { key: todo.id, className: "flex items-center justify-between p-2", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, todo.text), /*#__PURE__*/ React.createElement("button", { className: "text-red-500 hover:text-red-700 font-bold font-roboto", onClick: ()=>handleDeleteTodo(todo.id), __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }))))))); }