function MainComponent() { const [products, setProducts] = React.useState([ { id: 1, name: "Product 1", description: "This is a description of product 1.", images: [ "./images/product1-1.jpg", "./images/product1-2.jpg", "./images/product1-3.jpg" ] }, { id: 2, name: "Product 2", description: "This is a description of product 2.", images: [ "./images/product2-1.jpg", "./images/product2-2.jpg", "./images/product2-3.jpg" ] }, { id: 3, name: "Product 3", description: "This is a description of product 3.", images: [ "./images/product3-1.jpg", "./images/product3-2.jpg", "./images/product3-3.jpg" ] } ]); const [searchTerm, setSearchTerm] = React.useState(""); const [currentImage, setCurrentImage] = React.useState({}); const filteredProducts = products.filter((product)=>product.name.toLowerCase().includes(searchTerm.toLowerCase())); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search product", className: "mb-4 p-2 border-2 border-gray-400 rounded-lg w-full max-w-md", onChange: (e)=>setSearchTerm(e.target.value), __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }), filteredProducts.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "flex flex-col items-center mb-6", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[400px] h-[400px] mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: currentImage[product.id] || product.images[0], alt: `${product.name} view`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-2 mb-2", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, product.images.map((image, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>setCurrentImage({ ...currentImage, [product.id]: image }), className: "w-8 h-8 bg-white rounded-full p-1", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: `Thumbnail view of ${product.name} ${index + 1}`, className: "w-full h-full object-cover rounded-full", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg text-[#121212] mb-2", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, product.description))))); }