function MainComponent() { const [habits, setHabits] = React.useState([]); const [newHabit, setNewHabit] = React.useState(''); const [reminderTime, setReminderTime] = React.useState(''); const [reminderDays, setReminderDays] = React.useState({ monday: false, tuesday: false, wednesday: false, thursday: false, friday: false, saturday: false, sunday: false }); const handleNewHabitChange = (event)=>{ setNewHabit(event.target.value); }; const handleReminderTimeChange = (event)=>{ setReminderTime(event.target.value); }; const handleDayChange = (day)=>{ setReminderDays({ ...reminderDays, [day]: !reminderDays[day] }); }; const formatDays = (days)=>{ return Object.entries(days).filter(([_, value])=>value).map(([key])=>key.charAt(0).toUpperCase() + key.slice(1)).join(', '); }; const addHabit = ()=>{ if (newHabit.trim() !== '') { const habitWithReminder = { name: newHabit, reminderTime: reminderTime, reminderDays: reminderDays, completed: false }; setHabits([ ...habits, habitWithReminder ]); setNewHabit(''); setReminderTime(''); setReminderDays({ monday: false, tuesday: false, wednesday: false, thursday: false, friday: false, saturday: false, sunday: false }); } }; const toggleHabitCompletion = (index)=>{ const updatedHabits = [ ...habits ]; updatedHabits[index].completed = !updatedHabits[index].completed; setHabits(updatedHabits); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center p-4 bg-[#F3F4F6] min-h-screen", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-[#121212] my-4", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, "Habit Tracker"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6 w-full max-w-md", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#121212] text-sm font-bold mb-2", htmlFor: "habit-name", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "New Habit Name"), /*#__PURE__*/ React.createElement("input", { name: "habit-name", value: newHabit, onChange: handleNewHabitChange, type: "text", className: "shadow appearance-none border rounded w-full py-2 px-3 text-[#121212] leading-tight focus:outline-none focus:shadow-outline", id: "habit-name", placeholder: "Enter your habit", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#121212] text-sm font-bold mb-2", htmlFor: "reminder-time", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Reminder Time"), /*#__PURE__*/ React.createElement("input", { name: "reminder-time", value: reminderTime, onChange: handleReminderTimeChange, type: "time", className: "shadow appearance-none border rounded w-full py-2 px-3 text-[#121212] leading-tight focus:outline-none focus:shadow-outline", id: "reminder-time", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6 grid grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, Object.keys(reminderDays).map((day)=>/*#__PURE__*/ React.createElement("label", { key: day, className: "inline-flex items-center", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: day, checked: reminderDays[day], onChange: ()=>handleDayChange(day), className: "form-checkbox h-5 w-5 text-[#059669]", __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-sm text-[#121212]", __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this }, day.charAt(0).toUpperCase() + day.slice(1))))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: addHabit, className: "bg-[#10B981] hover:bg-[#059669] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, "Add Habit"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded p-4", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#121212] font-bold mb-3", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, "Daily Habits"), habits.length > 0 ? /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, habits.map((habit, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex flex-col mb-4", __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 129, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 130, columnNumber: 21 }, __self: this }, habit.name), /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `habit-${index}`, checked: habit.completed, onChange: ()=>toggleHabitCompletion(index), __source: { fileName: "", lineNumber: 131, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#6B7280]", __source: { fileName: "", lineNumber: 138, columnNumber: 19 }, __self: this }, "Reminder: ", habit.reminderTime ? habit.reminderTime : 'No time set', " on ", formatDays(habit.reminderDays))))) : /*#__PURE__*/ React.createElement("div", { className: "text-center text-sm text-[#6B7280]", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, "No habits added yet.")))); }