function MainComponent() { const [cart, setCart] = React.useState([]); const products = [ { id: 1, name: 'Infinity Gauntlet', price: '1000', image: 'infinity-gauntlet.png' }, { id: 2, name: 'Thanos Suit', price: '1500', image: 'thanos-suit.png' }, { id: 3, name: 'Spider-Man Suit', price: '800', image: 'spider-man-suit.png' }, { id: 4, name: 'Infinity Stone', price: '300', image: 'infinity-stone.png' } ]; const addToCart = (product)=>{ setCart([ ...cart, product ]); }; const cartItems = cart.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center bg-[#f4f4f4] p-4 my-2 rounded-lg shadow", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.image, alt: `${item.name} in cart`, className: "w-16 h-16 mr-4", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#999]", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "Price: $", item.price)))); const productCards = products.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image, alt: `${product.name}`, className: "w-[200px] h-[200px] mx-auto", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-xl my-2", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212] mb-3", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, "Price: $", product.price), /*#__PURE__*/ React.createElement("button", { onClick: ()=>addToCart(product), className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "Add to Cart 🛒"))); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center my-10", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, "Avengers Weapons Shop"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, productCards), /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold my-5", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, "Cart"), cart.length > 0 ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 26 }, __self: this }, cartItems) : /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 46, columnNumber: 51 }, __self: this }, "Your cart is empty.")); }