"use client" /** * @name Grid View 05 * @description A masonry-style content grid with varied card sizes for featured content. * Perfect for blog highlights, news feeds, and editorial layouts. * * @slots grid-view, grid-view-container, grid-view-header, grid-view-heading, grid-view-description, * grid-view-gallery, grid-view-item, grid-view-image, grid-view-badge, grid-view-content, * grid-view-title, grid-view-excerpt, grid-view-footer, grid-view-author, grid-view-date * @variant masonry-content * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface ContentItem { id: string title: string excerpt?: string category?: string author?: string date?: string featured?: boolean } interface GridView05Props { heading?: string description?: string items?: ContentItem[] onItemClick?: (id: string) => void className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultItems: ContentItem[] = [ { id: "item-1", title: "The Future of AI in Web Development", excerpt: "Exploring how artificial intelligence is revolutionizing the way we build and maintain web applications. From automated testing to intelligent code completion.", category: "Technology", author: "Sarah Chen", date: "Dec 15, 2024", featured: true }, { id: "item-2", title: "Design Systems at Scale", excerpt: "Building design systems that work across large organizations.", category: "Design", author: "Mike Ross", date: "Dec 14, 2024" }, { id: "item-3", title: "React Server Components", excerpt: "Understanding the new paradigm in React development.", category: "Development", author: "Alex Kim", date: "Dec 13, 2024" }, { id: "item-4", title: "Sustainable Tech Practices", excerpt: "How companies are reducing their digital carbon footprint through efficient coding practices and green hosting solutions.", category: "Sustainability", author: "Emma Wilson", date: "Dec 12, 2024", featured: true }, { id: "item-5", title: "Mobile-First UX", excerpt: "Key principles for designing mobile experiences.", category: "UX", author: "David Lee", date: "Dec 11, 2024" }, { id: "item-6", title: "API Security Best Practices", excerpt: "Protecting your endpoints from common vulnerabilities.", category: "Security", author: "Lisa Park", date: "Dec 10, 2024" }, { id: "item-7", title: "TypeScript Patterns", excerpt: "Advanced patterns for type-safe applications.", category: "Development", author: "James Miller", date: "Dec 9, 2024" }, { id: "item-8", title: "CSS Grid Mastery", excerpt: "Create complex layouts with modern CSS Grid techniques.", category: "CSS", author: "Anna Brown", date: "Dec 8, 2024" }, { id: "item-9", title: "Testing Strategies", excerpt: "Comprehensive testing approaches for modern apps.", category: "Testing", author: "Tom Wilson", date: "Dec 7, 2024" }, ] // ============================================================================ // COMPONENT // ============================================================================ function GridView05({ heading = "Latest Articles", description = "Curated content and insights from our team of experts.", items = defaultItems, onItemClick, className, idBase = "grid-view-05", }: GridView05Props) { const headingId = `${idBase}-heading` return (

{/* Header */} {(heading || description) && (

{heading && (

{heading}

)} {description && (

{description}

)}

)} {/* Masonry Grid */}

{items.map((item) => (

onItemClick?.(item.id)} > {/* Featured Image */}

{/* Category Badge */} {item.category && ( {item.category} )} {/* Content */}

{item.title}

{item.excerpt && (

{item.excerpt}

)}

{/* Footer */}

{item.author && ( {item.author} )} {item.author && item.date && •} {item.date && ( {item.date} )}

))}

) } export default GridView05 export { GridView05, type GridView05Props }