// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Blog 04 * @description Simple blog list with thumbnails and clean layout. * Scannable format ideal for news sites and content directories. * * @slots blog, blog-container, blog-header, blog-badge, blog-heading, * blog-description, blog-list, blog-item, blog-item-image, * blog-item-content, blog-item-category, blog-item-title, * blog-item-excerpt, blog-item-meta, blog-pagination * @variant list * * @registryDependencies badge button * @dependencies lucide-react */ import * as React from "react" import { ArrowLeft, ArrowRight, Calendar, Clock } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { Button } from "@/registry/ui/button" // ============================================================================ // TYPES // ============================================================================ interface BlogPostConfig { /** Unique identifier for list key */ id: string /** Post title */ title: string /** Post excerpt */ excerpt: string /** Post category */ category: string /** Publication date */ date: string /** Read time */ readTime: string /** Post URL */ href: string } interface Blog04Props { /** Section badge text */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Blog posts */ posts?: BlogPostConfig[] /** Show pagination */ showPagination?: boolean /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_POSTS: BlogPostConfig[] = [ { id: "post-css-grid", title: "Mastering CSS Grid: Advanced Layout Techniques", excerpt: "Learn advanced CSS Grid techniques including subgrid, auto-fit, and complex responsive layouts that adapt beautifully to any screen size.", category: "CSS", date: "Jan 22, 2025", readTime: "10 min", href: "#", }, { id: "post-state", title: "State Management in 2025: What You Need to Know", excerpt: "A comprehensive overview of modern state management solutions from Zustand to Jotai, and when to use each one.", category: "React", date: "Jan 20, 2025", readTime: "8 min", href: "#", }, { id: "post-forms", title: "Building Accessible Forms That Users Love", excerpt: "Practical techniques for creating forms that are both beautiful and fully accessible to all users.", category: "Accessibility", date: "Jan 18, 2025", readTime: "7 min", href: "#", }, { id: "post-nextjs", title: "The Complete Guide to Next.js 15", excerpt: "Everything new in Next.js 15: from React Server Components to improved caching and the new App Router features.", category: "Next.js", date: "Jan 15, 2025", readTime: "12 min", href: "#", }, { id: "post-design-system", title: "Design System Documentation Best Practices", excerpt: "How to document your design system so developers actually use it. Tips from teams at Stripe, Vercel, and Linear.", category: "Design Systems", date: "Jan 12, 2025", readTime: "9 min", href: "#", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Blog04({ badge = "Latest Posts", heading = "Recent articles", description = "Catch up on our latest thinking about development, design, and building great products.", posts = DEFAULT_POSTS, showPagination = true, className, idBase, }: Blog04Props) { const headingId = `${idBase ?? "blog-04"}-heading` return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Blog List */}

{posts.map((post) => ( {/* Thumbnail */}

{/* Content */}

{post.category}

{post.title}

{post.excerpt}

))}

{/* Pagination */} {showPagination && (

Page 1 of 5

)}

) } export default Blog04 export { Blog04, type Blog04Props, type BlogPostConfig }