function AmazonPhotos({ title }) { return /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold my-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, title); } function AmazonPhotosStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AmazonPhotos, { title: "Amazon Photos ファミリーフォルダー", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this })); } function MainComponent() { const [photos, setPhotos] = React.useState(Array.from({ length: 50 }).map((_, index)=>({ id: index + 1, src: `/path/to/your/image${index + 1}.jpg`, alt: `family photo ${index + 1}` }))); const observer = React.useRef(); const lastPhotoElementRef = React.useCallback((node)=>{ if (observer.current) observer.current.disconnect(); observer.current = new IntersectionObserver((entries)=>{ if (entries[0].isIntersecting) { const newPhotos = Array.from({ length: 10 }).map((_, index)=>({ id: photos.length + index + 1, src: `/path/to/your/image${photos.length + index + 1}.jpg`, alt: `family photo ${photos.length + index + 1}` })); setPhotos((prevPhotos)=>[ ...prevPhotos, ...newPhotos ]); } }); if (node) observer.current.observe(node); }, [ photos ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AmazonPhotos, { title: "Amazon Photos ファミリーフォルダー", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4 w-full", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, photos.map((photo, index)=>{ if (photos.length === index + 1) { return /*#__PURE__*/ React.createElement("div", { ref: lastPhotoElementRef, key: photo.id, className: "w-full h-[200px] bg-gray-200 flex items-center justify-center overflow-hidden rounded-lg", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "object-cover w-full h-full", src: photo.src, alt: photo.alt, loading: "lazy", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this })); } else { return /*#__PURE__*/ React.createElement("div", { key: photo.id, className: "w-full h-[200px] bg-gray-200 flex items-center justify-center overflow-hidden rounded-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "object-cover w-full h-full", src: photo.src, alt: photo.alt, loading: "lazy", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this })); } }))); }