function MainComponent() { const [meals, setMeals] = React.useState({ breakfast: '', lunch: '', dinner: '' }); const handleInputChange = (e)=>{ const { name, value } = e.target; setMeals({ ...meals, [name]: value }); }; const handleFormSubmit = (e)=>{ e.preventDefault(); // This is where you would typically handle submitting the form to a server or state management console.log('Submitted meal plan: ', meals); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-[#f7f7f7] flex flex-col items-center pt-8 font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full p-4 bg-white shadow-md flex justify-center", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-[#121212]", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "Meal Planner")), /*#__PURE__*/ React.createElement("main", { className: "flex-1 w-full max-w-4xl mt-8 p-4", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "Plan Your Meals"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "breakfast", className: "block mb-2 text-sm text-[#121212]", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }, "Breakfast"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "breakfast", name: "breakfast", value: meals.breakfast, onChange: handleInputChange, placeholder: "Eggs and Toast", className: "p-2 w-full border-2 border-[#ddd] rounded-md", __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "lunch", className: "block mb-2 text-sm text-[#121212]", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, "Lunch"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "lunch", name: "lunch", value: meals.lunch, onChange: handleInputChange, placeholder: "Chicken Salad", className: "p-2 w-full border-2 border-[#ddd] rounded-md", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "dinner", className: "block mb-2 text-sm text-[#121212]", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, "Dinner"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "dinner", name: "dinner", value: meals.dinner, onChange: handleInputChange, placeholder: "Grilled Salmon", className: "p-2 w-full border-2 border-[#ddd] rounded-md", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 p-2 bg-[#4CAF50] text-white rounded-md", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Add to Plan"))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Your Weekly Plan"), /*#__PURE__*/ React.createElement("div", { className: "w-full overflow-x-auto", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 80, columnNumber: 19 }, __self: this }, "Monday"), /*#__PURE__*/ React.createElement("th", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 81, columnNumber: 19 }, __self: this }, "Tuesday"), /*#__PURE__*/ React.createElement("th", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 82, columnNumber: 19 }, __self: this }, "Wednesday"), /*#__PURE__*/ React.createElement("th", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 83, columnNumber: 19 }, __self: this }, "Thursday"), /*#__PURE__*/ React.createElement("th", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }, "Friday"), /*#__PURE__*/ React.createElement("th", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this }, "Saturday"), /*#__PURE__*/ React.createElement("th", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this }, "Sunday"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 91, columnNumber: 19 }, __self: this }, "Oatmeal"), /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 92, columnNumber: 19 }, __self: this }, "Smoothie"), /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 93, columnNumber: 19 }, __self: this }, "Bagel"), /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 94, columnNumber: 19 }, __self: this }, "Waffles"), /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 95, columnNumber: 19 }, __self: this }, "Cereal"), /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }, "Pancakes"), /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 97, columnNumber: 19 }, __self: this }, "Brunch")), /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 100, columnNumber: 19 }, __self: this }, "Salad"), /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 101, columnNumber: 19 }, __self: this }, "Soup"), /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 102, columnNumber: 19 }, __self: this }, "Wrap"), /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 103, columnNumber: 19 }, __self: this }, "Pasta"), /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 104, columnNumber: 19 }, __self: this }, "Burger"), /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 105, columnNumber: 19 }, __self: this }, "Sushi"), /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 106, columnNumber: 19 }, __self: this }, "BBQ")), /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 109, columnNumber: 19 }, __self: this }, "Steak"), /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 110, columnNumber: 19 }, __self: this }, "Tacos"), /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 111, columnNumber: 19 }, __self: this }, "Pizza"), /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }, "Stir Fry"), /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 113, columnNumber: 19 }, __self: this }, "Fish"), /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 114, columnNumber: 19 }, __self: this }, "Curry"), /*#__PURE__*/ React.createElement("td", { className: "p-4 border-b-2 border-[#ddd]", __source: { fileName: "", lineNumber: 115, columnNumber: 19 }, __self: this }, "Roast"))))))), /*#__PURE__*/ React.createElement("footer", { className: "w-full p-4 bg-white", __source: { fileName: "", lineNumber: 122, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center text-sm text-[#121212]", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, "© 2023 MealPlanner Inc.")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, ` body { margin: 0; padding: 0; box-sizing: border-box; } `)); }

Monday	Tuesday	Wednesday	Thursday	Friday	Saturday	Sunday
Oatmeal	Smoothie	Bagel	Waffles	Cereal	Pancakes	Brunch
Salad	Soup	Wrap	Pasta	Burger	Sushi	BBQ
Steak	Tacos	Pizza	Stir Fry	Fish	Curry	Roast