function MainComponent() { const [cart, setCart] = React.useState([]); const addToCart = (product)=>{ setCart((currentCart)=>{ const itemInCart = currentCart.find((item)=>item.name === product.name); if (itemInCart) { return currentCart.map((item)=>item.name === product.name ? { ...item, quantity: item.quantity + 1 } : item); } return [ ...currentCart, { ...product, quantity: 1 } ]; }); }; const removeItem = (productName)=>{ setCart((currentCart)=>currentCart.filter((item)=>item.name !== productName)); }; const products = [ { name: "Eco Friendly Notebook", price: "$5.99", image: "items/notebook.jpg" }, { name: "Bamboo Toothbrush", price: "$3.99", image: "items/toothbrush.jpg" }, { name: "Reusable Water Bottle", price: "$20.99", image: "items/water-bottle.jpg" }, { name: "Organic Cotton Tote Bag", price: "$7.99", image: "items/tote-bag.jpg" } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-green-200 to-blue-200", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-4 text-4xl font-bold text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Green Store"), /*#__PURE__*/ React.createElement("p", { className: "mb-8 text-xl text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Making sustainability the norm.")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 px-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, products.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.name, className: "bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image, alt: `Purchase ${product.name}`, className: "w-full h-[200px] rounded-t-lg object-cover", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-lg font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, product.price), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mt-4", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>addToCart(product), className: "flex-1 py-2 px-4 bg-green-500 text-white rounded hover:bg-green-700 font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, "Add to Cart 🛒"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeItem(product.name), className: "flex-1 py-2 px-4 bg-red-500 text-white rounded hover:bg-red-700 font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, "Remove ❌"))))))); }