function MainComponent() { const [habits, setHabits] = React.useState([ { name: "Drink water", goal: "8 glasses per day", emoji: "🚰", performance: [ 3, 5, 6, 8, 7, 8, 8 ] }, { name: "Morning exercise", goal: "30 minutes", emoji: "🏃‍♂️", performance: [ 20, 25, 30, 35, 30, 30, 28 ] }, { name: "Read", goal: "1 chapter", emoji: "📚", performance: [ 1, 1, 1, 1, 1, 1, 1 ] } ]); const [habitName, setHabitName] = React.useState(""); const [habitGoal, setHabitGoal] = React.useState(""); const [emoji, setEmoji] = React.useState(""); const [selectedHabit, setSelectedHabit] = React.useState(null); const handleAddHabit = (e)=>{ e.preventDefault(); const newHabit = { name: habitName, goal: habitGoal, emoji: emoji, performance: [] }; setHabits([ ...habits, newHabit ]); setHabitName(""); setHabitGoal(""); setEmoji(""); }; const handleHabitNameChange = (e)=>{ setHabitName(e.target.value); }; const handleHabitGoalChange = (e)=>{ setHabitGoal(e.target.value); }; const handleEmojiChange = (e)=>{ setEmoji(e.target.value); }; const selectHabit = (index)=>{ setSelectedHabit(habits[index]); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f4f8] flex flex-col items-center pt-10", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#334155] mb-6 font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, "Healthy Habits Tracker"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl p-5 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddHabit, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#334155] mb-2 font-roboto", htmlFor: "habitName", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Habit Name"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-[#d1d5db] rounded-md focus:outline-none focus:ring-2 focus:ring-[#6366f1] focus:border-transparent", type: "text", id: "habitName", name: "habitName", placeholder: "E.g., Drink water", value: habitName, onChange: handleHabitNameChange, __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#334155] mb-2 font-roboto", htmlFor: "habitGoal", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "Habit Goal"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-[#d1d5db] rounded-md focus:outline-none focus:ring-2 focus:ring-[#6366f1] focus:border-transparent", type: "text", id: "habitGoal", name: "habitGoal", placeholder: "E.g., 8 glasses per day", value: habitGoal, onChange: handleHabitGoalChange, __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#334155] mb-2 font-roboto", htmlFor: "emoji", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Emoji"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-[#d1d5db] rounded-md focus:outline-none focus:ring-2 focus:ring-[#6366f1] focus:border-transparent", type: "text", id: "emoji", name: "emoji", placeholder: "E.g., 🚰", value: emoji, onChange: handleEmojiChange, __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-[#6366f1] text-white font-bold py-2 px-4 rounded hover:bg-[#4f46e5] font-roboto", type: "submit", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Add Habit"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl mt-8", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#334155] mb-4 font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "My Habits"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, habits.map((habit, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>selectHabit(index), className: "text-sm font-medium text-[#334155] font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, `${habit.name} - ${habit.goal} ${habit.emoji}`))))), selectedHabit && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl mt-6 bg-white p-5 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-[#334155] mb-3 font-roboto", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, `${selectedHabit.name} Performance`), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { viewBox: "0 0 100 50", className: "w-full", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, selectedHabit.performance.map((value, index, arr)=>{ const nextValue = arr[index + 1] || 0; return /*#__PURE__*/ React.createElement("line", { key: index, x1: index * (100 / arr.length), y1: 50 - value, x2: (index + 1) * (100 / arr.length), y2: 50 - nextValue, stroke: "#4f46e5", strokeWidth: "0.5", __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this }); }))))); }