function MainComponent() { const [cartItems, setCartItems] = React.useState([ { id: 1, name: "Vintage Denim Jacket", price: 79.99, quantity: 1 }, { id: 2, name: "Leather Ankle Boots", price: 149.99, quantity: 1 }, { id: 3, name: "Silk Summer Dress", price: 89.99, quantity: 2 } ]); const handleQuantityChange = (itemId, newQuantity)=>{ setCartItems(cartItems.map((item)=>item.id === itemId ? { ...item, quantity: newQuantity } : item)); }; const handleRemoveClick = (itemId)=>{ setCartItems(cartItems.filter((item)=>item.id !== itemId)); }; const totalPrice = React.useMemo(()=>{ return cartItems.reduce((total, item)=>total + item.price * item.quantity, 0); }, [ cartItems ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#fcfcfc] px-4 py-8", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold mb-8 text-center font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "Shopping Cart"), cartItems.length === 0 ? /*#__PURE__*/ React.createElement("p", { className: "text-center text-lg text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Your cart is empty.") : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, cartItems.map((item)=>/*#__PURE__*/ React.createElement("li", { key: item.id, className: "flex mb-6 pb-4 border-b border-gray-300", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[120px] h-[120px]", __source: { fileName: "", lineNumber: 33, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `./images/product-${item.id}.jpg`, alt: `${item.name}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 34, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 ml-4", __source: { fileName: "", lineNumber: 36, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 21 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 21 }, __self: this }, "$ ", item.price.toFixed(2)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mt-2", __source: { fileName: "", lineNumber: 39, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleQuantityChange(item.id, Math.max(1, item.quantity - 1)), className: "text-gray-500 w-8 h-8 flex justify-center items-center bg-gray-100 rounded-md", __source: { fileName: "", lineNumber: 40, columnNumber: 23 }, __self: this }, "-"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "quantity", value: item.quantity, onChange: (e)=>handleQuantityChange(item.id, Math.max(1, parseInt(e.target.value))), className: "w-16 text-center border border-gray-300 rounded-md mx-2", min: "1", __source: { fileName: "", lineNumber: 43, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleQuantityChange(item.id, item.quantity + 1), className: "text-gray-500 w-8 h-8 flex justify-center items-center bg-gray-100 rounded-md", __source: { fileName: "", lineNumber: 51, columnNumber: 23 }, __self: this }, "+")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleRemoveClick(item.id), className: "text-red-500 text-sm mt-2", __source: { fileName: "", lineNumber: 55, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash-alt", __source: { fileName: "", lineNumber: 56, columnNumber: 23 }, __self: this }), " Remove"))))), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-semibold text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "Total: $ ", totalPrice.toFixed(2)), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-[#5a5a5a] text-white px-6 py-2 rounded-md font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "Checkout"))))); }