function MainComponent() { const [products, setProducts] = React.useState([ { id: 1, name: 'Summer Dress', status: 'In stock', price: '$35.00', imageSrc: './images/product-1.jpg', imageAlt: 'Trendy summer dress' }, { id: 2, name: 'Cotton T-Shirt', status: 'In stock', price: '$19.99', imageSrc: './images/product-2.jpg', imageAlt: 'Comfortable cotton t-shirt' }, { id: 3, name: 'Sports Sneakers', status: 'Limited stock', price: '$89.99', imageSrc: './images/product-3.jpg', imageAlt: 'Latest sports sneakers' } ]); React.useEffect(()=>{ const observer = new IntersectionObserver((entries)=>{ const [entry] = entries; if (entry.isIntersecting) { setProducts((prevProducts)=>[ ...prevProducts, ...[ { id: prevProducts.length + 1, name: 'New Product', status: 'In stock', price: '$99.99', imageSrc: './images/product-new.jpg', imageAlt: 'Newly added product' } ] ]); } }, { root: null, rootMargin: '0px', threshold: 0.1 }); const lastProductElement = document.querySelector('#last-product'); if (lastProductElement) { observer.observe(lastProductElement); } return ()=>{ if (lastProductElement) { observer.unobserve(lastProductElement); } }; }, [ products ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow", __source: { fileName: "", lineNumber: 61, 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: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "E-commerce Store"), /*#__PURE__*/ React.createElement("form", { className: "flex border border-gray-300 rounded-md overflow-hidden", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", className: "px-4 py-2 w-80", placeholder: "Search products...", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "flex items-center justify-center px-4 border-l bg-gray-200", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-gray-600", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto py-6 sm:px-6 lg:max-w-7xl lg:px-8", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, products.map((product, index)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "group relative", id: index === products.length - 1 ? 'last-product' : undefined, __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.imageSrc, alt: product.imageAlt, className: "w-full h-full object-center object-cover lg:w-full lg:h-full", __source: { fileName: "", lineNumber: 83, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-between", __source: { fileName: "", lineNumber: 89, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 90, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 91, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", __source: { fileName: "", lineNumber: 92, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { "aria-hidden": "true", className: "absolute inset-0", __source: { fileName: "", lineNumber: 93, columnNumber: 25 }, __self: this }), product.name)), /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-sm text-gray-500", __source: { fileName: "", lineNumber: 97, columnNumber: 21 }, __self: this }, product.status)), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-900", __source: { fileName: "", lineNumber: 99, columnNumber: 19 }, __self: this }, product.price)))))))); }