"use client" /** * @name Gallery 05 * @description Infinite scroll gallery with lazy loading images. * Continuously load more images as the user scrolls. * * @slots gallery, gallery-container, gallery-header, gallery-badge, * gallery-heading, gallery-description, gallery-grid, gallery-item, * gallery-image-wrapper, gallery-image, gallery-caption, gallery-loader * @variant infinite-scroll * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Loader2 } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface GalleryImage { id: string src: string alt: string caption?: string } interface Gallery05Props { badge?: string heading?: string description?: string images?: GalleryImage[] className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultImages: GalleryImage[] = [ { id: "img-1", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Architecture 1", caption: "Modern Building" }, { id: "img-2", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Architecture 2", caption: "Glass Facade" }, { id: "img-3", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Architecture 3", caption: "Urban Design" }, { id: "img-4", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Architecture 4", caption: "Interior Space" }, { id: "img-5", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Architecture 5", caption: "Minimalist Home" }, { id: "img-6", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Architecture 6", caption: "Industrial Loft" }, { id: "img-7", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Architecture 7", caption: "Contemporary Villa" }, { id: "img-8", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Architecture 8", caption: "Office Complex" }, { id: "img-9", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Architecture 9", caption: "Cultural Center" }, { id: "img-10", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Architecture 10", caption: "Residential Tower" }, { id: "img-11", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Architecture 11", caption: "Museum Design" }, { id: "img-12", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Architecture 12", caption: "Sustainable Build" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Gallery05({ badge = "Portfolio", heading = "Our work", description = "Browse through our extensive collection of architectural photography and design projects.", images = defaultImages, className, idBase = "gallery-05", }: Gallery05Props) { const [displayedImages, setDisplayedImages] = React.useState(images.slice(0, 6)) const [loading, setLoading] = React.useState(false) const [hasMore, setHasMore] = React.useState(images.length > 6) const loaderRef = React.useRef(null) const headingId = `${idBase}-heading` React.useEffect(() => { const observer = new IntersectionObserver( (entries) => { if (entries[0].isIntersecting && hasMore && !loading) { setLoading(true) setTimeout(() => { const currentLength = displayedImages.length const nextImages = images.slice(currentLength, currentLength + 6) setDisplayedImages((prev) => [...prev, ...nextImages]) setHasMore(currentLength + 6 < images.length) setLoading(false) }, 800) } }, { threshold: 0.1 } ) if (loaderRef.current) { observer.observe(loaderRef.current) } return () => observer.disconnect() }, [displayedImages, hasMore, loading, images]) return (

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{displayedImages.map((image) => (

{image.caption && (

{image.caption}

)}

))}

{hasMore && (

{loading && (

)}

) } export default Gallery05 export { Gallery05, type Gallery05Props }