function MainComponent() { const [cart, setCart] = React.useState([]); const handleAddToCart = (product)=>{ setCart((prevCart)=>prevCart.some((item)=>item.id === product.id) ? prevCart : [ ...prevCart, product ]); }; const handleRemoveFromCart = (product)=>{ setCart((prevCart)=>prevCart.filter((item)=>item.id !== product.id)); }; const handleBuyNow = (product)=>{}; const Product = ({ id, name, price, image })=>{ const isInCart = cart.some((item)=>item.id === id); return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute z-10 w-full flex justify-between items-start p-2", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-left text-[#000] font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, name), /*#__PURE__*/ React.createElement("span", { className: "text-right text-[#000] font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, price)), /*#__PURE__*/ React.createElement("img", { src: image, alt: `${name}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex justify-center items-center opacity-0 transition-opacity duration-300 hover:opacity-100", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, !isInCart ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { className: "text-[#000] border border-[#000] bg-white p-2 m-2 font-roboto transition-colors duration-300 hover:bg-[#000] hover:text-white", onClick: ()=>handleAddToCart({ id, name, price }), __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, "Add to Cart"), /*#__PURE__*/ React.createElement("button", { className: "text-white bg-[#000] p-2 m-2 font-roboto", onClick: ()=>handleBuyNow({ id, name, price }), __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "Buy Now")) : /*#__PURE__*/ React.createElement("button", { className: "text-[#000] border border-[#000] bg-white p-2 m-2 font-roboto transition-colors duration-300", onClick: ()=>handleRemoveFromCart({ id, name, price }), __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "Remove"))); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-stretch gap-4 bg-[#010101] p-8", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold font-roboto mb-6 text-white", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, "numke"), [ { id: 1, name: "Shirt", price: "$20", image: "/images/shirt.jpg" }, { id: 2, name: "Pants", price: "$40", image: "/images/pants.jpg" }, { id: 3, name: "Nike Vintage Jacket", price: "$100", image: "/images/vintage-jacket.jpg" } ].map((product)=>/*#__PURE__*/ React.createElement(Product, { key: product.id, ...product, __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }))); }