// "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Gallery 07 * @description Minimal full-bleed gallery with clean aesthetic. * Edge-to-edge images with subtle hover effects. * * @slots gallery, gallery-container, gallery-header, gallery-badge, * gallery-heading, gallery-description, gallery-grid, gallery-item, * gallery-image-wrapper, gallery-image, gallery-overlay, gallery-title * @variant full-bleed * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface GalleryImage { id: string src: string alt: string title?: string } interface Gallery07Props { 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: "Gallery Image 1", title: "Abstract Composition" }, { id: "img-2", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery Image 2", title: "Urban Geometry" }, { id: "img-3", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery Image 3", title: "Natural Patterns" }, { id: "img-4", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery Image 4", title: "Light Study" }, { id: "img-5", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery Image 5", title: "Texture Detail" }, { id: "img-6", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery Image 6", title: "Color Theory" }, { id: "img-7", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery Image 7", title: "Form Exploration" }, { id: "img-8", src: "/assets/placeholders/placeholder-3x2.svg", alt: "Gallery Image 8", title: "Shadow Play" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Gallery07({ badge = "Gallery", heading = "Visual stories", description = "A curated collection of our finest work, presented in stunning detail.", images = defaultImages, className, idBase = "gallery-07", }: Gallery07Props) { const headingId = `${idBase}-heading` return (

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{images.map((image) => (

{image.title && (

{image.title}

)}

))}

) } export default Gallery07 export { Gallery07, type Gallery07Props }