"use client" /** * @name Gallery 04 * @description Carousel gallery with thumbnails. * Main image with thumbnail navigation below. * * @slots gallery, gallery-container, gallery-header, gallery-heading, * gallery-description, gallery-main, gallery-main-wrapper, * gallery-main-image, gallery-nav-prev, gallery-nav-next, * gallery-title, gallery-counter, gallery-thumbnails, gallery-thumbnail * @variant carousel-thumbnails * * @registryDependencies button * @dependencies lucide-react */ import * as React from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/registry/ui/button" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface GalleryItem { id: string src: string alt: string title?: string } interface Gallery04Props { heading?: string description?: string items?: GalleryItem[] className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultItems: GalleryItem[] = [ { id: "img-1", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery image 1", title: "Coastal Sunrise" }, { id: "img-2", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery image 2", title: "Mountain Summit" }, { id: "img-3", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery image 3", title: "Forest Trail" }, { id: "img-4", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery image 4", title: "Urban Skyline" }, { id: "img-5", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery image 5", title: "Desert Landscape" }, { id: "img-6", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery image 6", title: "Tropical Beach" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Gallery04({ heading = "Featured Gallery", description = "Browse through our curated collection of stunning imagery.", items = defaultItems, className, idBase = "gallery-04", }: Gallery04Props) { const [activeIndex, setActiveIndex] = React.useState(0) const thumbnailsRef = React.useRef(null) const headingId = `${idBase}-heading` const goToPrevious = () => { setActiveIndex((prev) => (prev === 0 ? items.length - 1 : prev - 1)) } const goToNext = () => { setActiveIndex((prev) => (prev === items.length - 1 ? 0 : prev + 1)) } React.useEffect(() => { const container = thumbnailsRef.current const thumbnail = container?.children[activeIndex] as HTMLElement if (thumbnail && container) { const containerRect = container.getBoundingClientRect() const thumbnailRect = thumbnail.getBoundingClientRect() if (thumbnailRect.left < containerRect.left || thumbnailRect.right > containerRect.right) { thumbnail.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" }) } } }, [activeIndex]) React.useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "ArrowLeft") goToPrevious() if (e.key === "ArrowRight") goToNext() } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, []) return (

{heading}

{description && (

{description}

)}

{items[activeIndex].title && (

{items[activeIndex].title}

{activeIndex + 1} / {items.length}

)}

{items.map((item, index) => ( ))}

) } export default Gallery04 export { Gallery04, type Gallery04Props }