// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Gallery 01 * @description A simple image gallery grid with uniform sizing. Responsive * layout that adjusts columns based on screen size. * * @slots gallery, gallery-container, gallery-header, gallery-heading, * gallery-description, gallery-grid, gallery-item, gallery-image, * gallery-caption * @variant grid * * @registryDependencies * @dependencies */ import * as React from "react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface GalleryImage { /** Unique identifier */ id: string /** Image URL */ src: string /** Alt text */ alt: string /** Optional caption */ caption?: string } interface Gallery01Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Gallery images */ images?: GalleryImage[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultImages: GalleryImage[] = [ { id: "image-1", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery image 1", caption: "Project One", }, { id: "image-2", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery image 2", caption: "Project Two", }, { id: "image-3", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery image 3", caption: "Project Three", }, { id: "image-4", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery image 4", caption: "Project Four", }, { id: "image-5", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery image 5", caption: "Project Five", }, { id: "image-6", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery image 6", caption: "Project Six", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Gallery01({ heading = "Our gallery", description = "A collection of beautiful moments captured through our lens.", images = defaultImages, className, }: Gallery01Props) { return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Gallery Grid */}

{images.map((image) => (

{image.caption && (

{image.caption}

)}

))}

) } export default Gallery01 export { Gallery01, type Gallery01Props, type GalleryImage }