function MainComponent() { const [products, setProducts] = React.useState([ { id: 1, name: "Wireless Headphones", price: 99.99, image: "/images/headphones.jpg" }, { id: 2, name: "Smartwatch", price: 199.99, image: "/images/smartwatch.jpg" }, { id: 3, name: "Portable Speaker", price: 149.99, image: "/images/speaker.jpg" } ]); const [cart, setCart] = React.useState([]); const [search, setSearch] = React.useState(""); const [showCart, setShowCart] = React.useState(false); const filteredProducts = products.filter((product)=>product.name.toLowerCase().includes(search.toLowerCase())); const addToCart = (product)=>{ const productExists = cart.find((item)=>item.id === product.id); if (productExists) { setCart(cart.map((item)=>item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item)); } else { setCart([ ...cart, { ...product, quantity: 1 } ]); } }; const handleCartClick = ()=>{ setShowCart(true); }; const handleTitleClick = ()=>{ setShowCart(false); }; const noProductsMessage = search && filteredProducts.length === 0 ? /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 30, columnNumber: 71 }, __self: this }, "No products found.") : null; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-[#f0f0f0] font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex items-center justify-between bg-[#1a73e8] p-4 text-white", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl cursor-pointer", onClick: handleTitleClick, __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Online Marketplace"), /*#__PURE__*/ React.createElement("div", { className: "w-[300px]", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 rounded text-black bg-white", type: "search", name: "searchProduct", placeholder: "Search products", value: search, onChange: (e)=>setSearch(e.target.value), __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "relative text-xl", onClick: handleCartClick, __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "🛒", /*#__PURE__*/ React.createElement("span", { className: "absolute top-0 right-0 rounded-full bg-[#ff0000] px-2 text-sm", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, cart.reduce((count, product)=>count + product.quantity, 0)))), /*#__PURE__*/ React.createElement("main", { className: "p-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, showCart ? /*#__PURE__*/ React.createElement("div", { className: "col-span-full bg-white p-4", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Cart Items:"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, cart.map((item)=>/*#__PURE__*/ React.createElement("li", { key: item.id, className: "mb-2 flex items-center justify-between", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.image, alt: `Image of ${item.name}`, className: "w-20 h-20 object-cover", __source: { fileName: "", lineNumber: 59, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 60, columnNumber: 21 }, __self: this }, item.name)), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 62, columnNumber: 19 }, __self: this }, "Quantity: ", item.quantity))), cart.length === 0 && /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 65, columnNumber: 37 }, __self: this }, "Your cart is empty."))) : /*#__PURE__*/ React.createElement(React.Fragment, null, noProductsMessage, filteredProducts.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "bg-white rounded overflow-hidden shadow-lg", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image, alt: `${product.name} product image`, className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "text-lg text-[#333] mb-2", __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#121212]", __source: { fileName: "", lineNumber: 76, columnNumber: 19 }, __self: this }, "$", product.price.toFixed(2)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>addToCart(product), className: "mt-3 bg-[#4caf50] text-white rounded px-6 py-2 hover:bg-[#45a045] active:bg-[#43a047] transition duration-150 ease-in-out", __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this }, "Add to Cart")))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1a73e8] p-4 text-center text-white", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, "© 2023 Online Marketplace")); }