function MainComponent() { const [currentPage, setCurrentPage] = React.useState('home'); const [selectedRecipe, setSelectedRecipe] = React.useState(null); const recipes = [ { name: 'Quinoa Salad', image: '/quinoa-salad.jpg' }, { name: 'Avocado Toast', image: '/avocado-toast.jpg' }, { name: 'Chia Pudding', image: '/chia-pudding.jpg' } ]; const handleSelectRecipe = (recipe)=>{ setSelectedRecipe(recipe); setCurrentPage('ingredients'); }; const ingredientsDetails = { 'Quinoa Salad': { ingredients: [ '1 cup quinoa', '1 diced tomato', '1 diced cucumber', 'Lemon juice', 'Olive oil' ], steps: [ 'Cook quinoa as per instructions.', 'Mix vegetables with cooked quinoa.', 'Season with lemon juice and olive oil.' ] }, 'Avocado Toast': { ingredients: [ '2 slices of bread', '1 ripe avocado', 'Red chili flakes', 'Salt' ], steps: [ 'Toast the bread.', 'Mash the avocado and spread on bread.', 'Sprinkle with chili flakes and salt.' ] }, 'Chia Pudding': { ingredients: [ '3 tablespoons chia seeds', '1 cup almond milk', '1 tablespoon honey', 'Fresh fruits for topping' ], steps: [ 'Mix chia seeds with almond milk and let sit overnight.', 'Add honey and top with fresh fruits.' ] } }; const handleGoHome = ()=>setCurrentPage('home'); const homePage = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#121212] my-8 font-crimson-text", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "Healthy Delights"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full px-4", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, recipes.map((recipe)=>/*#__PURE__*/ React.createElement("div", { key: recipe.name, onClick: ()=>handleSelectRecipe(recipe), className: "cursor-pointer", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: recipe.image, alt: `Prepare delicious ${recipe.name}`, className: "w-full h-[200px] object-cover rounded-md", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-[#121212] mt-2", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, recipe.name))))); const ingredientsPage = selectedRecipe && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedRecipe.image, alt: `${selectedRecipe.name}`, className: "w-[300px] h-[300px] object-cover rounded-md mt-8", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-[#121212] my-4 font-crimson-text", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, selectedRecipe.name), /*#__PURE__*/ React.createElement("ul", { className: "list-disc", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, ingredientsDetails[selectedRecipe.name].ingredients.map((ingredient)=>/*#__PURE__*/ React.createElement("li", { key: ingredient, __source: { fileName: "", lineNumber: 46, columnNumber: 82 }, __self: this }, ingredient))), /*#__PURE__*/ React.createElement("ol", { className: "list-decimal", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, ingredientsDetails[selectedRecipe.name].steps.map((step, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 49, columnNumber: 77 }, __self: this }, step))), /*#__PURE__*/ React.createElement("button", { onClick: handleGoHome, className: "mt-4 px-4 py-2 bg-[#3498db] text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-[#2c3e50]", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, "Back")); const navbar = /*#__PURE__*/ React.createElement("nav", { className: "fixed bottom-0 left-0 right-0 bg-[#ffffff] border-t border-gray-200 shadow-md py-2", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around items-center", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleGoHome, className: "text-[#3498db]", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home fa-lg", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-[#3498db]", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search fa-lg", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-[#3498db]", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user fa-lg", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-[#3498db]", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus fa-lg", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this })))); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#F0F2F5] min-h-screen pb-16", __source: { fileName: "", lineNumber: 73, columnNumber: 5 }, __self: this }, currentPage === 'home' ? homePage : ingredientsPage, navbar); }