// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Gallery 03 * @description A filterable gallery with lightbox modal. Category filter tabs * and click-to-expand functionality for detailed viewing. * * @slots gallery, gallery-container, gallery-header, gallery-heading, * gallery-description, gallery-filters, gallery-filter-button, * gallery-grid, gallery-item, gallery-item-image, gallery-item-title, * gallery-lightbox, gallery-lightbox-image, gallery-lightbox-title * @variant filterable * * @registryDependencies button * @dependencies lucide-react */ import * as React from "react" import { X, ChevronLeft, ChevronRight, Expand } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" // ============================================================================ // TYPES // ============================================================================ interface GalleryItem { /** Unique identifier */ id: string /** Image URL */ src: string /** Image alt text */ alt: string /** Image title */ title?: string /** Category for filtering */ category: string } interface Gallery03Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Gallery items */ items?: GalleryItem[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultItems: GalleryItem[] = [ { id: "item-1", src: "/assets/placeholders/placeholder-4x3.svg", alt: "Gallery image 1", title: "Project One", category: "Architecture" }, { id: "item-2", src: "/assets/placeholders/placeholder-4x3.svg", alt: "Gallery image 2", title: "Project Two", category: "Interior" }, { id: "item-3", src: "/assets/placeholders/placeholder-4x3.svg", alt: "Gallery image 3", title: "Project Three", category: "Architecture" }, { id: "item-4", src: "/assets/placeholders/placeholder-4x3.svg", alt: "Gallery image 4", title: "Project Four", category: "Landscape" }, { id: "item-5", src: "/assets/placeholders/placeholder-4x3.svg", alt: "Gallery image 5", title: "Project Five", category: "Interior" }, { id: "item-6", src: "/assets/placeholders/placeholder-4x3.svg", alt: "Gallery image 6", title: "Project Six", category: "Architecture" }, { id: "item-7", src: "/assets/placeholders/placeholder-4x3.svg", alt: "Gallery image 7", title: "Project Seven", category: "Landscape" }, { id: "item-8", src: "/assets/placeholders/placeholder-4x3.svg", alt: "Gallery image 8", title: "Project Eight", category: "Interior" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Gallery03({ heading = "Our Gallery", description = "Explore our portfolio of work across different categories.", items = defaultItems, className, }: Gallery03Props) { const [activeCategory, setActiveCategory] = React.useState("All") const [lightboxIndex, setLightboxIndex] = React.useState(null) // Extract unique categories const categories = React.useMemo(() => { const cats = Array.from(new Set(items.map((item) => item.category))) return ["All", ...cats] }, [items]) // Filter items const filteredItems = React.useMemo(() => { if (activeCategory === "All") return items return items.filter((item) => item.category === activeCategory) }, [items, activeCategory]) const openLightbox = (index: number) => { setLightboxIndex(index) document.body.style.overflow = "hidden" } const closeLightbox = () => { setLightboxIndex(null) document.body.style.overflow = "" } const goToPrevious = () => { if (lightboxIndex === null) return setLightboxIndex( lightboxIndex === 0 ? filteredItems.length - 1 : lightboxIndex - 1 ) } const goToNext = () => { if (lightboxIndex === null) return setLightboxIndex( lightboxIndex === filteredItems.length - 1 ? 0 : lightboxIndex + 1 ) } // Handle keyboard navigation React.useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (lightboxIndex === null) return if (e.key === "Escape") closeLightbox() if (e.key === "ArrowLeft") goToPrevious() if (e.key === "ArrowRight") goToNext() } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [lightboxIndex]) return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Filter Tabs */}

{categories.map((category) => ( ))}

{/* Gallery Grid */}

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

{filteredItems.length === 0 && (

No images found in this category.

)}

{/* Lightbox Modal */} {lightboxIndex !== null && ( )}

) } export default Gallery03 export { Gallery03, type Gallery03Props, type GalleryItem }