// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Grid View 02 * @description A compact grid view with hover overlays for quick actions. * Great for project portfolios and work showcases. * * @slots grid-view, grid-view-container, grid-view-grid, grid-view-card, * grid-view-card-badge, grid-view-card-icon, grid-view-card-content, * grid-view-card-title, grid-view-card-subtitle, grid-view-card-actions * @variant compact * * @registryDependencies button badge * @dependencies lucide-react */ import * as React from "react" import { Button } from "@/registry/ui/button" import { Badge } from "@/registry/ui/badge" import { ExternalLink, Eye, Folder, Code, Palette, Globe, Database, FileText } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ type ProjectType = "web" | "mobile" | "design" | "api" | "database" | "docs" type IconProps = { className?: string "aria-hidden"?: boolean | "true" | "false" focusable?: "true" | "false" } interface GridItem { /** Unique identifier */ id: string /** Project title */ title: string /** Project subtitle/description */ subtitle?: string /** Project type */ type?: ProjectType /** Featured badge text */ badge?: string } interface GridView02Props { /** Items to display */ items?: GridItem[] /** Callback when item is clicked */ onItemClick?: (id: string) => void /** Callback when view is clicked */ onViewClick?: (id: string) => void /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultItems: GridItem[] = [ { id: "1", title: "Project Alpha", subtitle: "Web Application", type: "web", badge: "Featured" }, { id: "2", title: "Mobile App", subtitle: "iOS & Android", type: "mobile" }, { id: "3", title: "Dashboard", subtitle: "Analytics Platform", type: "web" }, { id: "4", title: "E-Commerce", subtitle: "Online Store", type: "web", badge: "New" }, { id: "5", title: "Brand Identity", subtitle: "Design System", type: "design" }, { id: "6", title: "Admin Panel", subtitle: "Management System", type: "web" }, { id: "7", title: "REST API", subtitle: "Backend Service", type: "api" }, { id: "8", title: "Component Library", subtitle: "UI Components", type: "design", badge: "Popular" }, ] const typeIcons: Record> = { web: Globe, mobile: Folder, design: Palette, api: Code, database: Database, docs: FileText, } // ============================================================================ // COMPONENT // ============================================================================ function GridView02({ items = defaultItems, onItemClick, onViewClick, className, }: GridView02Props) { return (

{items.map((item) => { const IconComponent = typeIcons[item.type || "web"] return (

{/* Badge */} {item.badge && ( {item.badge} )} {/* Icon */}

{/* Content */}

{item.title}

{item.subtitle && (

{item.subtitle}

)}

{/* Hover Actions */}

) })}

) } export default GridView02 export { GridView02, type GridView02Props, type GridItem, type ProjectType }