function MainComponent() { const [selectedDiet, setSelectedDiet] = React.useState(null); const [searchQuery, setSearchQuery] = React.useState(''); let filteredMeals; const meals = [ { id: 1, name: 'Vegan Burger', description: 'A plant-based burger packed with flavor and nutrition.', image: '/vegan-meal.jpg', diet: 'Vegan' }, { id: 2, name: 'Vegetarian Sushi', description: 'Fresh and colorful sushi varieties, perfect for vegetarians.', image: '/vegetarian-meal.jpg', diet: 'Vegetarian' }, { id: 3, name: 'Gluten-Free Chicken', description: 'A hearty meal of chicken and rice, made completely gluten-free.', image: '/gluten-free-meal.jpg', diet: 'Gluten-Free' }, { id: 4, name: 'Keto Avocado Salad', description: 'A delicious avocado salad to fit your keto diet needs.', image: '/keto-meal.jpg', diet: 'Keto' }, { id: 5, name: 'Nut-Free Chicken Roast', description: 'Enjoy the safe and savory taste of our nut-free chicken roast.', image: '/nut-free-meal.jpg', diet: 'Nut-Free' }, { id: 6, name: 'Dairy-Free Pasta', description: 'Savor our rich tomato pasta, completely dairy-free.', image: '/dairy-free-meal.jpg', diet: 'Dairy-Free' } ]; if (selectedDiet) { filteredMeals = meals.filter((meal)=>meal.diet === selectedDiet); } else { filteredMeals = meals; } if (searchQuery) { filteredMeals = filteredMeals.filter((meal)=>meal.name.toLowerCase().includes(searchQuery.toLowerCase())); } const handleDietClick = (diet)=>{ setSelectedDiet(diet); }; const diets = [ 'Vegan', 'Vegetarian', 'Gluten-Free', 'Keto', 'Nut-Free', 'Dairy-Free' ]; const dietButtons = diets.map((diet)=>/*#__PURE__*/ React.createElement("button", { key: diet, onClick: ()=>handleDietClick(diet), className: `px-3 py-1 rounded-full text-sm font-medium focus:outline-none ${selectedDiet === diet ? 'bg-[#00ccbc] text-white' : 'text-[#00ccbc] bg-white'}`, __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, diet)); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#00ccbc] p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex w-full max-w-xs bg-white rounded overflow-hidden", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search meals...", className: "w-full px-4 py-2 text-[#121212]", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "px-4 bg-[#00ac9f]", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-search text-white", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center flex-wrap gap-2 mt-4", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, dietButtons), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, filteredMeals.map((meal)=>/*#__PURE__*/ React.createElement("div", { key: meal.id, className: "bg-white rounded-lg overflow-hidden shadow-lg", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: meal.image, alt: `Special diet meal: ${meal.name}`, className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg text-[#121212] mb-2", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, meal.name), /*#__PURE__*/ React.createElement("p", { className: "text-[#666] text-sm mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, meal.description), /*#__PURE__*/ React.createElement("button", { className: "bg-[#00ccbc] text-white font-semibold py-2 px-4 w-full rounded-lg", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, "Order Now")))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#00ccbc] p-4 mt-8", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this })); }