// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Gallery 02 * @description A masonry-style gallery with varying image heights. Features * a featured large image with smaller supporting images. * * @slots gallery, gallery-container, gallery-header, gallery-heading, * gallery-description, gallery-view-all, gallery-layout, * gallery-featured, gallery-featured-image, gallery-featured-category, * gallery-grid, gallery-item, gallery-item-image, gallery-item-category * @variant masonry * * @registryDependencies button-link button * @dependencies lucide-react */ import * as React from "react" import { ArrowRight } from "lucide-react" import { cn } from "@/registry/lib/utils" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface GalleryImage { /** Unique identifier */ id: string /** Image URL */ src: string /** Alt text */ alt: string /** Optional category/tag */ category?: string } interface Gallery02Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Gallery images (first is featured) */ images?: GalleryImage[] /** View all link */ viewAllHref?: string /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultImages: GalleryImage[] = [ { id: "image-1", src: "/assets/placeholders/placeholder-3x4.svg", alt: "Featured project", category: "Featured", }, { id: "image-2", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery image 1", category: "Interior", }, { id: "image-3", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery image 2", category: "Living", }, { id: "image-4", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery image 3", category: "Exterior", }, { id: "image-5", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery image 4", category: "Kitchen", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Gallery02({ heading = "Featured projects", description = "Explore our latest work showcasing modern design and architecture.", images = defaultImages, viewAllHref = "#", className, }: Gallery02Props) { const [featured, ...rest] = images return (

{/* Header */}

{heading}

{description && (

{description}

)}

View all

{/* Gallery Layout */}

{/* Featured Image */} {featured && (

)} {/* Grid Images */}

{rest.slice(0, 4).map((image) => (

))}

) } export default Gallery02 export { Gallery02, type Gallery02Props, type GalleryImage }