function MainComponent() { const [favorites, setFavorites] = React.useState([]); const [searchTerm, setSearchTerm] = React.useState(''); const [orderHistory, setOrderHistory] = React.useState([]); const [popularProducts, setPopularProducts] = React.useState({}); const navigateToProduct = (productId)=>{ // Logic to navigate to product }; const placeOrder = ()=>{ // Logic to place an order }; const toggleFavorite = (productId)=>{ setFavorites((prevFavorites)=>{ if (prevFavorites.includes(productId)) { return prevFavorites.filter((id)=>id !== productId); } else { return [ ...prevFavorites, productId ]; } }); }; const ShoppingCart = ()=>{ // ShoppingCart component code unchanged }; const handleSearch = (e)=>{ setSearchTerm(e.target.value); }; const isFavorite = (productId)=>{ return favorites.includes(productId); }; const ProductListing = ()=>{ // Assume products is an array of products fetched from an API const products = []; return /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, products.filter((product)=>product.title.toLowerCase().includes(searchTerm.toLowerCase())).map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "p-4 border rounded-md space-y-2", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image, alt: `Image of ${product.title}`, className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, product.title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, "$", product.price.toFixed(2)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>navigateToProduct(product.id), className: "bg-[#4285F4] text-white py-1 px-3 rounded-md", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, "View"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleFavorite(product.id), className: `ml-2 py-1 px-3 rounded-md ${isFavorite(product.id) ? 'text-[#ff4747]' : 'text-gray-400'}`, __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, isFavorite(product.id) ? '❤️' : '🤍'))))); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-xl mb-3", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "Welcome to our Bakery!"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search products...", value: searchTerm, onChange: handleSearch, className: "w-full p-2 border rounded-md mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: placeOrder, className: "bg-[#4CAF50] text-white py-1 px-3 rounded-md", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "Place Order")), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-xl mb-3", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, "Order History")), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-xl mb-3", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, "Popular Products")), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-xl mb-3", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, "Your Favorites")), /*#__PURE__*/ React.createElement(ProductListing, { __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ShoppingCart, { __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this })); }