function MainComponent() { const [cart, setCart] = React.useState([]); const [inventory] = React.useState([ { id: 1, name: 'Item 1', description: 'Description of item', price: 10, img: './inventory-item-1.jpg' }, { id: 2, name: 'Item 2', description: 'Description of item', price: 20, img: './inventory-item-2.jpg' } ]); const addToCart = (item)=>{ const itemInCart = cart.find((i)=>i.id === item.id); if (itemInCart) { setCart(cart.map((i)=>i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i)); } else { setCart([ ...cart, { ...item, quantity: 1 } ]); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white p-4 font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center py-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Sales Application"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "View Cart ", /*#__PURE__*/ React.createElement("i", { className: "fas fa-shopping-cart", __source: { fileName: "", lineNumber: 26, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "my-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-6", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Inventory"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-4 mt-4", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, inventory.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "bg-gray-100 p-4 rounded shadow-sm", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.img, alt: `Image of ${item.name}`, className: "h-32 w-full object-cover rounded", __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium", __source: { fileName: "", lineNumber: 37, columnNumber: 19 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 38, columnNumber: 19 }, __self: this }, item.description), /*#__PURE__*/ React.createElement("button", { onClick: ()=>addToCart(item), className: "bg-green-500 text-white px-2 py-1 rounded mt-2 w-full", __source: { fileName: "", lineNumber: 39, columnNumber: 19 }, __self: this }, "Add to Cart")))))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Cart Details"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 rounded mt-4 shadow-sm", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, cart.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "flex justify-between items-center border-b border-gray-200 pb-2 mb-2", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }, "Quantity: ", item.quantity)), /*#__PURE__*/ React.createElement("div", { className: "text-gray-700", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, "$", (item.price * item.quantity).toFixed(2)))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between font-semibold mt-4", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "Total"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "$", cart.reduce((total, item)=>total + item.price * item.quantity, 0).toFixed(2)))))), /*#__PURE__*/ React.createElement("footer", { className: "py-4 text-center text-gray-600 border-t border-gray-200", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, "© 2023 Retail Sales Application")); }