function MainComponent() { const [habits, setHabits] = React.useState([ { id: 1, icon: "fa-meditate", name: "Meditate", description: "0 / 16 min", days: 0, checked: false }, { id: 2, icon: "fa-dumbbell", name: "Hit the Gym", description: "0 / 3 times", days: 0, checked: false }, { id: 3, icon: "fa-book-reader", name: "Read Books", description: "0 / 7 times", days: 0, checked: false } ]); const [loading, setLoading] = React.useState(false); const handleCheck = async (id)=>{ const updatedHabits = habits.map((habit)=>habit.id === id ? { ...habit, checked: !habit.checked } : habit); setHabits(updatedHabits); const checkedHabit = updatedHabits.find((habit)=>habit.id === id); const currentDate = new Date().toLocaleDateString(); setLoading(true); const checkResponse = await fetch('/api/db/habit_records', { method: 'POST', body: JSON.stringify({ query: 'SELECT `id` FROM `habit_records` WHERE `habit_id` = ? AND `date` = ?', values: [ id, currentDate ] }) }); const checkData = await checkResponse.json(); if (checkData.length > 0) { await fetch('/api/db/habit_records', { method: 'POST', body: JSON.stringify({ query: 'UPDATE `habit_records` SET `completed` = ? WHERE `id` = ?', values: [ checkedHabit.checked, checkData[0].id ] }) }); } else { await fetch('/api/db/habit_records', { method: 'POST', body: JSON.stringify({ query: 'INSERT INTO `habit_records` (`habit_id`, `date`, `completed`) VALUES (?, ?, ?)', values: [ id, currentDate, checkedHabit.checked ] }) }); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "font-sans bg-gray-200 min-h-screen flex", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] bg-gray-100 h-full shadow-md", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "p-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "text-blue-600 text-xl p-2 mb-2 flex items-center space-x-2", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-list-alt", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "All Habits")), /*#__PURE__*/ React.createElement("li", { className: "text-gray-600 text-xl p-2 mb-2 flex items-center space-x-2", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-sun", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Afternoon")), /*#__PURE__*/ React.createElement("li", { className: "text-gray-600 text-xl mt-4 mb-2 ml-2", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Area"), /*#__PURE__*/ React.createElement("li", { className: "text-gray-600 text-xl p-2 mb-2 flex items-center space-x-2", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-heartbeat", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Health")), /*#__PURE__*/ React.createElement("li", { className: "text-gray-600 text-xl mt-4 mb-2 ml-2", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Other"), /*#__PURE__*/ React.createElement("li", { className: "text-gray-600 text-xl p-2 mb-2 flex items-center space-x-2", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-chart-bar", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Progress")))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-white p-6", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-semibold text-gray-600", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-calendar mr-2", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }), "Today", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 78, columnNumber: 57 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Friday, 19 Jan 2024")), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 text-2xl text-gray-600", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-angle-left cursor-pointer", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "Today"), /*#__PURE__*/ React.createElement("i", { className: "fa fa-angle-right cursor-pointer", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-bars cursor-pointer", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-plus cursor-pointer", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }))), loading && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 90, columnNumber: 21 }, __self: this }, "Loading..."), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, habits.map((habit)=>/*#__PURE__*/ React.createElement("li", { key: habit.id, className: "flex items-center justify-between mb-4 p-4 bg-gray-100 rounded-md border border-gray-300", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${habit.icon} text-purple-500 text-2xl`, __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-gray-700", __source: { fileName: "", lineNumber: 97, columnNumber: 19 }, __self: this }, habit.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 98, columnNumber: 19 }, __self: this }, habit.description), /*#__PURE__*/ React.createElement("progress", { className: "w-full h-2 rounded-full bg-blue-500", max: "100", value: habit.checked ? 100 : 0, __source: { fileName: "", lineNumber: 99, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `habit-${habit.id}`, onChange: ()=>handleCheck(habit.id), checked: habit.checked, className: "h-5 w-5 text-indigo-600", __source: { fileName: "", lineNumber: 103, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleCheck(habit.id), className: "py-1 px-3 bg-gray-200 text-gray-700 rounded-full border border-gray-300", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, "+ 1"))))))); }