function MainComponent() { const [items, setItems] = React.useState([ { id: 1, name: 'Sweater', price: 50 }, { id: 2, name: 'Jeans', price: 40 }, { id: 3, name: 'T-Shirt', price: 20 } ]); const [cart, setCart] = React.useState([]); const addToCart = (itemId)=>{ const item = items.find((item)=>item.id === itemId); setCart([ ...cart, item ]); }; const removeFromCart = (itemId)=>{ setCart(cart.filter((item)=>item.id !== itemId)); }; const totalPrice = cart.reduce((total, item)=>total + item.price, 0); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7] flex flex-col items-center pt-8", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto mb-10 text-[#222]", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, "E-Commerce Shop"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 px-8 w-full", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, items.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "bg-white shadow-lg rounded-lg p-6 flex flex-col items-center", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `./images/${item.name.toLowerCase()}.jpg`, alt: `${item.name}`, className: "w-[150px] h-[150px] mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2 text-[#222]", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto text-[#555]", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "$", item.price), /*#__PURE__*/ React.createElement("button", { name: `add-${item.name.toLowerCase()}`, className: "mt-4 bg-[#ff4500] text-white py-2 px-4 rounded uppercase font-roboto font-bold hover:bg-[#e03a00] transition-colors duration-200", onClick: ()=>addToCart(item.id), __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Add to Cart")))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl mt-12 bg-white shadow-lg rounded-lg p-6 flex flex-col items-center", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold font-roboto mb-4 text-[#222]", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "Shopping Cart"), /*#__PURE__*/ React.createElement("ul", { className: "w-full", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, cart.map((item)=>/*#__PURE__*/ React.createElement("li", { key: item.id, className: "flex justify-between items-center py-2 border-b border-[#eee]", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg font-roboto text-[#555]", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg font-roboto text-[#555]", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, "$", item.price), /*#__PURE__*/ React.createElement("button", { name: `remove-${item.name.toLowerCase()}`, className: "ml-4 text-red-600 hover:text-red-800 transition-colors duration-200", onClick: ()=>removeFromCart(item.id), __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 53, columnNumber: 19 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "w-full pt-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl font-bold font-roboto text-[#222]", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Total:"), /*#__PURE__*/ React.createElement("span", { className: "text-xl font-bold font-roboto text-[#222]", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "$", totalPrice)), /*#__PURE__*/ React.createElement("button", { name: "checkout", className: "mt-4 bg-[#008000] text-white py-2 px-6 rounded uppercase font-roboto font-bold hover:bg-[#006400] transition-colors duration-200", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "Checkout"))); }