// "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Gallery 06 * @description Portfolio gallery with project details overlay. * Hover to reveal project information and links. * * @slots gallery, gallery-container, gallery-header, gallery-badge, * gallery-heading, gallery-description, gallery-grid, gallery-item, * gallery-image-wrapper, gallery-image, gallery-overlay, gallery-content, * gallery-category, gallery-title, gallery-subtitle, gallery-link * @variant portfolio * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { ArrowRight } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface PortfolioItem { id: string src: string title: string subtitle: string category: string href: string } interface Gallery06Props { badge?: string heading?: string description?: string items?: PortfolioItem[] className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultItems: PortfolioItem[] = [ { id: "proj-1", src: "/assets/placeholders/placeholder-4x3.svg", title: "E-Commerce Redesign", subtitle: "Complete UX overhaul for retail platform", category: "Web Design", href: "#" }, { id: "proj-2", src: "/assets/placeholders/placeholder-4x3.svg", title: "Brand Identity", subtitle: "Visual identity for tech startup", category: "Branding", href: "#" }, { id: "proj-3", src: "/assets/placeholders/placeholder-4x3.svg", title: "Mobile Banking App", subtitle: "iOS and Android financial app", category: "Mobile", href: "#" }, { id: "proj-4", src: "/assets/placeholders/placeholder-4x3.svg", title: "SaaS Dashboard", subtitle: "Analytics platform for enterprises", category: "Product Design", href: "#" }, { id: "proj-5", src: "/assets/placeholders/placeholder-4x3.svg", title: "Marketing Website", subtitle: "Lead generation landing pages", category: "Web Design", href: "#" }, { id: "proj-6", src: "/assets/placeholders/placeholder-4x3.svg", title: "Design System", subtitle: "Component library for scale", category: "Systems", href: "#" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Gallery06({ badge = "Work", heading = "Selected projects", description = "Explore our portfolio of digital products and brand experiences we've crafted for clients worldwide.", items = defaultItems, className, idBase = "gallery-06", }: Gallery06Props) { const headingId = `${idBase}-heading` return (

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{items.map((item) => (

{item.category}

{item.title}

{item.subtitle}

View Project

))}

) } export default Gallery06 export { Gallery06, type Gallery06Props }