function MainComponent() { const [products, setProducts] = React.useState([ { id: 1, name: 'T-shirt', image: 'images/t-shirt.jpg', price: '29.99' }, { id: 2, name: 'Jeans', image: 'images/jeans.jpg', price: '59.99' }, { id: 3, name: 'Jacket', image: 'images/jacket.jpg', price: '99.99' } ]); const [cart, setCart] = React.useState([]); const addToCart = (product)=>{ setCart([ ...cart, product ]); }; const cartItemCount = cart.length; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f3f3f3]", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#f8f8f8] shadow-md", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 flex justify-between items-center", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto text-[#333]", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "Designer FJ"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "text-2xl text-[#333] relative font-roboto p-2 hover:text-blue-500 focus:outline-none", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-shopping-cart", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }), cartItemCount > 0 && /*#__PURE__*/ React.createElement("span", { className: "rounded-full bg-red-500 text-white text-xs font-roboto absolute -top-3 -right-3 px-2 py-1", __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }, cartItemCount))))), /*#__PURE__*/ React.createElement("main", { className: "my-8", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-4", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, products.map((product)=>/*#__PURE__*/ React.createElement("div", { className: "w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-4", key: product.id, __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { alt: `A ${product.name} from Designer FJ`, src: product.image, className: "w-full h-[300px] object-cover", __source: { fileName: "", lineNumber: 44, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 45, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold font-roboto text-xl text-[#333] mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 21 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#333] mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 21 }, __self: this }, "$", product.price), /*#__PURE__*/ React.createElement("button", { onClick: ()=>addToCart(product), className: "bg-blue-500 text-white font-roboto font-bold uppercase text-sm px-6 py-3 rounded shadow hover:bg-blue-700 outline-none focus:outline-none mr-1 mb-1 w-full", type: "button", __source: { fileName: "", lineNumber: 50, columnNumber: 21 }, __self: this }, "Add to Cart")))))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#f8f8f8] shadow-inner mt-8", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto py-4 px-5 sm:px-6 lg:px-8 text-center", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#333]", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "© 2023 Designer FJ. All rights reserved.")))); }