function ProductImageDisplay({ src, alt }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: src, alt: alt, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this })); } function ProductImageDisplayStory() { const products = [ { src: "path/to/product1.jpg", alt: "similar product 1" }, { src: "path/to/product2.jpg", alt: "similar product 2" }, { src: "path/to/product3.jpg", alt: "similar product 3" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, products.map((product, index)=>/*#__PURE__*/ React.createElement(ProductImageDisplay, { key: index, src: product.src, alt: product.alt, __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }))); } function MainComponent({ images }) { const [selectedImage, setSelectedImage] = React.useState(null); const handleImageSelect = (image)=>{ setSelectedImage(image); }; const atmosphereImages = images.slice(0, 3); const similarProductImages = images.length > 3 ? images.slice(3) : []; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-center gap-4", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, atmosphereImages.map((image, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "cursor-pointer transform transition-transform hover:scale-110", onClick: ()=>handleImageSelect(image), __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(ProductImageDisplay, { src: image.src, alt: image.alt, __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this })))), selectedImage && /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-center gap-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(ProductImageDisplay, { src: selectedImage.src, alt: selectedImage.alt, __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }), similarProductImages.map((image, index)=>/*#__PURE__*/ React.createElement(ProductImageDisplay, { key: index, src: image.src, alt: image.alt, __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this })))); } function generateRandomImages() { const imageArray = []; for(let i = 0; i < 1000; i++){ imageArray.push({ src: `path/to/ai-image${i}.jpg`, alt: `AI generated image ${i}` }); } return imageArray; } function StoryComponent() { const randomImages = generateRandomImages(); return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { images: randomImages, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this })); }