"use client" /** * @name Blog 05 * @description Masonry-style blog layout with varied card heights. * Pinterest-inspired design for visual content discovery. * * @slots blog, blog-container, blog-header, blog-badge, blog-heading, * blog-description, blog-masonry, blog-column, blog-card, * blog-card-image, blog-card-content, blog-card-category, * blog-card-title, blog-card-meta * @variant masonry * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Calendar } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface BlogPostConfig { /** Unique identifier for list key */ id: string /** Post title */ title: string /** Post category */ category: string /** Publication date */ date: string /** Post URL */ href: string /** Image aspect ratio variant */ aspectRatio?: "tall" | "wide" | "square" } interface Blog05Props { /** Section badge text */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Blog posts */ posts?: BlogPostConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_POSTS: BlogPostConfig[] = [ { id: "post-minimalist", title: "The Art of Minimalist Design", category: "Design", date: "Jan 22, 2025", href: "#", aspectRatio: "tall", }, { id: "post-performance", title: "JavaScript Performance Tips", category: "Development", date: "Jan 20, 2025", href: "#", aspectRatio: "square", }, { id: "post-color", title: "Color Theory for Digital Products", category: "Design", date: "Jan 18, 2025", href: "#", aspectRatio: "wide", }, { id: "post-micro", title: "Building Micro-Frontends", category: "Architecture", date: "Jan 16, 2025", href: "#", aspectRatio: "square", }, { id: "post-typography", title: "Typography in UI Design", category: "Design", date: "Jan 14, 2025", href: "#", aspectRatio: "tall", }, { id: "post-api", title: "API Design Best Practices", category: "Backend", date: "Jan 12, 2025", href: "#", aspectRatio: "wide", }, { id: "post-animations", title: "Animations That Delight", category: "UX", date: "Jan 10, 2025", href: "#", aspectRatio: "square", }, { id: "post-testing", title: "Testing Strategies for Modern Apps", category: "Testing", date: "Jan 8, 2025", href: "#", aspectRatio: "tall", }, { id: "post-responsive", title: "Responsive Design Patterns", category: "CSS", date: "Jan 6, 2025", href: "#", aspectRatio: "wide", }, ] // ============================================================================ // VARIANT LOOKUPS // ============================================================================ const ASPECT_RATIO_CLASSES: Record = { tall: "aspect-[3/4]", wide: "aspect-[4/3]", square: "aspect-square", } // ============================================================================ // COMPONENT // ============================================================================ function Blog05({ badge = "Discover", heading = "Explore our content", description = "Browse through our collection of articles, tutorials, and insights.", posts = DEFAULT_POSTS, className, idBase, }: Blog05Props) { const headingId = `${idBase ?? "blog-05"}-heading` // Split posts into columns for masonry effect const columns = React.useMemo(() => { const cols: BlogPostConfig[][] = [[], [], []] posts.forEach((post, index) => { cols[index % 3].push(post) }) return cols }, [posts]) return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Masonry Grid */}

{columns.map((column, colIndex) => (

{column.map((post) => ( {/* Image */}

{/* Content */}

{post.category}

{post.title}

))}

) } export default Blog05 export { Blog05, type Blog05Props, type BlogPostConfig }