// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Grid View 01 * @description A responsive grid view for displaying data cards. * Perfect for product listings, content items, and collections. * * @slots grid-view, grid-view-container, grid-view-grid, grid-view-card, * grid-view-card-header, grid-view-card-badge, grid-view-card-title, * grid-view-card-description, grid-view-card-footer, grid-view-card-stats, * grid-view-card-actions * @variant cards * * @registryDependencies button card badge * @dependencies lucide-react */ import * as React from "react" import { Button } from "@/registry/ui/button" import { Card, CardContent, CardFooter, CardHeader } from "@/registry/ui/card" import { Badge } from "@/registry/ui/badge" import { Heart, Share2, MoreHorizontal, Eye, Calendar, Tag } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface GridItem { /** Unique identifier */ id: string /** Item title */ title: string /** Item description */ description?: string /** Category label */ category?: string /** View count */ views?: number /** Date string */ date?: string /** Is liked/favorited */ liked?: boolean } interface GridView01Props { /** Items to display */ items?: GridItem[] /** Number of columns on large screens */ columns?: 2 | 3 | 4 /** Callback when item is clicked */ onItemClick?: (id: string) => void /** Callback when like is toggled */ onLikeToggle?: (id: string) => void /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultItems: GridItem[] = [ { id: "1", title: "Project Alpha", description: "A comprehensive development project with multiple milestones and deliverables", category: "Development", views: 1234, date: "Dec 15", liked: true }, { id: "2", title: "Marketing Campaign", description: "Q1 launch campaign targeting new user acquisition", category: "Marketing", views: 856, date: "Dec 12" }, { id: "3", title: "Design System", description: "Unified component library for consistent UI across products", category: "Design", views: 2341, date: "Dec 10", liked: true }, { id: "4", title: "API Integration", description: "Backend service connections and data sync implementation", category: "Backend", views: 567, date: "Dec 8" }, { id: "5", title: "User Research", description: "Customer interviews and usability testing results", category: "Research", views: 1789, date: "Dec 5" }, { id: "6", title: "Mobile App", description: "Cross-platform mobile application development", category: "Development", views: 432, date: "Dec 3" }, ] // ============================================================================ // COMPONENT // ============================================================================ const columnClasses = { 2: "sm:grid-cols-2", 3: "sm:grid-cols-2 lg:grid-cols-3", 4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", } function GridView01({ items = defaultItems, columns = 3, onItemClick, onLikeToggle, className, }: GridView01Props) { return (

{items.map((item) => ( onItemClick?.(item.id)} >

{item.category && ( )}

{item.title}

{item.description && (

{item.description}

)}

{item.date && ( )}

))}

) } export default GridView01 export { GridView01, type GridView01Props, type GridItem }