// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Grid View 03 * @description A social-style grid view with author info and engagement stats. * Perfect for content feeds, blog posts, and social platforms. * * @slots grid-view, grid-view-container, grid-view-grid, grid-view-card, * grid-view-card-header, grid-view-card-avatar, grid-view-card-author, * grid-view-card-content, grid-view-card-title, grid-view-card-excerpt, * grid-view-card-footer, grid-view-card-stats, grid-view-card-save * @variant social * * @registryDependencies button badge avatar * @dependencies lucide-react */ import * as React from "react" import { Button } from "@/registry/ui/button" import { Badge } from "@/registry/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ui/avatar" import { Heart, MessageCircle, Bookmark, Clock } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface Author { /** Author name */ name: string /** Avatar URL */ avatarUrl?: string } interface GridItem { /** Unique identifier */ id: string /** Post title */ title: string /** Post excerpt/preview */ excerpt?: string /** Post author */ author?: Author /** Like count */ likes?: number /** Comment count */ comments?: number /** Reading time */ readTime?: string /** Is saved/bookmarked */ saved?: boolean /** Category tag */ category?: string } interface GridView03Props { /** Items to display */ items?: GridItem[] /** Callback when item is clicked */ onItemClick?: (id: string) => void /** Callback when save is toggled */ onSaveToggle?: (id: string) => void /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultItems: GridItem[] = [ { id: "1", title: "Building scalable design systems from scratch", excerpt: "Learn the fundamentals of creating maintainable component libraries that grow with your team.", author: { name: "Sarah Chen" }, likes: 234, comments: 12, readTime: "8 min", category: "Design" }, { id: "2", title: "TypeScript best practices for 2024", excerpt: "Modern patterns and techniques for writing type-safe applications.", author: { name: "Mike Johnson" }, likes: 156, comments: 8, readTime: "5 min", category: "Development" }, { id: "3", title: "The art of user research", excerpt: "How to conduct meaningful interviews that lead to actionable insights.", author: { name: "Emma Davis" }, likes: 567, comments: 24, readTime: "12 min", saved: true, category: "Research" }, { id: "4", title: "Optimizing React performance", excerpt: "Advanced techniques for building fast and responsive applications.", author: { name: "John Smith" }, likes: 89, comments: 5, readTime: "6 min", category: "Development" }, { id: "5", title: "Principles of visual hierarchy", excerpt: "Guide users through your interface with intentional design decisions.", author: { name: "Lisa Wang" }, likes: 445, comments: 18, readTime: "7 min", category: "Design" }, { id: "6", title: "API design patterns that scale", excerpt: "Best practices for building robust and maintainable backend services.", author: { name: "Tom Brown" }, likes: 312, comments: 15, readTime: "10 min", category: "Backend" }, ] // ============================================================================ // COMPONENT // ============================================================================ function GridView03({ items = defaultItems, onItemClick, onSaveToggle, className, }: GridView03Props) { return (

{items.map((item) => (

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

{item.author && (

{item.author.name.split(" ").map((n) => n[0]).join("")} {item.author.name}

)} {item.category && ( {item.category} )}

{/* Content */}

{item.title}

{item.excerpt && (

{item.excerpt}

)}

{/* Footer */}

{item.readTime && ( )}

))}

) } export default GridView03 export { GridView03, type GridView03Props, type GridItem, type Author }