function MainComponent() { const [todos, setTodos] = useState([]); const [newTodo, setNewTodo] = useState(""); const [loading, setLoading] = useState(false); const loadTodos = useCallback(async ()=>{ setLoading(true); try { const response = await fetch("/api/db/todos-72", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `todos`", values: [] }) }); const data = await response.json(); setTodos(data); } catch (error) { console.error(error); } setLoading(false); }, []); const addTodo = useCallback(async ()=>{ if (!newTodo.trim()) return; setLoading(true); try { await fetch("/api/db/todos-72", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `todos` (text, completed, created_at) VALUES (?, false, ?)", values: [ newTodo, new Date().toISOString() ] }) }); loadTodos(); setNewTodo(""); } catch (error) { console.error(error); } setLoading(false); }, [ newTodo, loadTodos ]); const toggleTodo = useCallback(async (todo)=>{ try { await fetch("/api/db/todos-72", { method: "POST", body: JSON.stringify({ query: "UPDATE `todos` SET completed = ? WHERE id = ?", values: [ !todo.completed, todo.id ] }) }); loadTodos(); } catch (error) { console.error(error); } }, [ loadTodos ]); const deleteTodo = useCallback(async (id)=>{ try { await fetch("/api/db/todos-72", { method: "POST", body: JSON.stringify({ query: "DELETE FROM `todos` WHERE id = ?", values: [ id ] }) }); loadTodos(); } catch (error) { console.error(error); } }, [ loadTodos ]); const loadSampleData = useCallback(async ()=>{ setLoading(true); try { await fetch("/api/db/todos-72", { method: "POST", body: JSON.stringify({ query: "DELETE FROM `todos`", values: [] }) }); await fetch("/api/db/todos-72", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `todos` (text, completed, created_at) VALUES ('Buy groceries', false, '2024-01-01'), ('Walk the dog', false, '2024-01-01'), ('Read a book', true, '2024-01-01'), ('Learn React', false, '2024-01-01')", values: [] }) }); const response = await fetch("/api/db/todos-72", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `todos`", values: [] }) }); const data = await response.json(); setTodos(data); } catch (error) { console.error(error); } setLoading(false); }, []); useEffect(()=>{ loadTodos(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 py-8", __source: { fileName: "", lineNumber: 120, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 121, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, "Todo List"), /*#__PURE__*/ React.createElement("div", { className: "space-x-2", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: loadTodos, disabled: loading, className: "bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sync-alt mr-1", __source: { fileName: "", lineNumber: 130, columnNumber: 15 }, __self: this }), " Read"), /*#__PURE__*/ React.createElement("button", { onClick: loadSampleData, disabled: loading, className: "bg-green-500 text-white px-3 py-1 rounded text-sm hover:bg-green-600", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-database mr-1", __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }), " Create Sample"))), /*#__PURE__*/ React.createElement("div", { className: "flex mb-4", __source: { fileName: "", lineNumber: 142, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newTodo, onChange: (e)=>setNewTodo(e.target.value), className: "flex-1 px-4 py-2 border rounded-l focus:outline-none", placeholder: "Add a new todo", name: "todo-input", __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: addTodo, disabled: loading, className: "bg-green-500 text-white px-4 py-2 rounded-r hover:bg-green-600", __source: { fileName: "", lineNumber: 151, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-1", __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this }), " Create")), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center py-4", __source: { fileName: "", lineNumber: 160, columnNumber: 21 }, __self: this }, "Loading..."), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 162, columnNumber: 9 }, __self: this }, todos.map((todo)=>/*#__PURE__*/ React.createElement("li", { key: todo.id, className: "flex items-center bg-gray-50 p-3 rounded", __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: todo.completed, onChange: ()=>toggleTodo(todo), className: "mr-3", name: `todo-${todo.id}`, __source: { fileName: "", lineNumber: 168, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `flex-1 ${todo.completed ? "line-through text-gray-500" : ""}`, __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }, todo.text), /*#__PURE__*/ React.createElement("div", { className: "space-x-2", __source: { fileName: "", lineNumber: 180, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleTodo(todo), className: "text-blue-500 hover:text-blue-700", __source: { fileName: "", lineNumber: 181, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit", __source: { fileName: "", lineNumber: 185, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>deleteTodo(todo.id), className: "text-red-500 hover:text-red-700", __source: { fileName: "", lineNumber: 187, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 191, columnNumber: 19 }, __self: this })))))))); }