// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Blog 01 * @description A simple blog post grid with featured images, titles, * excerpts, and author info. Great for blog listing pages. * * @slots blog, blog-container, blog-header, blog-heading, blog-description, * blog-grid, blog-post, blog-post-image, blog-post-badge, * blog-post-content, blog-post-title, blog-post-excerpt, blog-post-meta, * blog-post-author, blog-post-avatar * @variant grid * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Calendar, Clock } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface BlogPost { /** Unique identifier */ id: string /** Post title */ title: string /** Post excerpt */ excerpt: string /** Featured image URL */ image: string /** Category */ category: string /** Author info */ author: { name: string avatar: string } /** Publish date */ date: string /** Read time */ readTime: string /** Post URL */ href: string } interface Blog01Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Blog posts */ posts?: BlogPost[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultPosts: BlogPost[] = [ { id: "post-1", title: "The Future of Web Development in 2024", excerpt: "Explore the latest trends and technologies shaping the web development landscape this year.", image: "/assets/placeholders/placeholder-16x9.svg", category: "Technology", author: { name: "Sarah Chen", avatar: "/assets/placeholders/avatar-placeholder.svg", }, date: "Dec 15, 2024", readTime: "5 min read", href: "#", }, { id: "post-2", title: "Building Accessible User Interfaces", excerpt: "Learn best practices for creating inclusive web experiences that work for everyone.", image: "/assets/placeholders/placeholder-16x9.svg", category: "Design", author: { name: "Marcus Johnson", avatar: "/assets/placeholders/avatar-placeholder.svg", }, date: "Dec 12, 2024", readTime: "8 min read", href: "#", }, { id: "post-3", title: "Optimizing React Performance", excerpt: "Practical tips and techniques to make your React applications faster and more efficient.", image: "/assets/placeholders/placeholder-16x9.svg", category: "Development", author: { name: "Emily Rodriguez", avatar: "/assets/placeholders/avatar-placeholder.svg", }, date: "Dec 10, 2024", readTime: "6 min read", href: "#", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Blog01({ heading = "Latest articles", description = "Insights and updates from our team on design, development, and technology.", posts = defaultPosts, className, }: Blog01Props) { return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Posts Grid */}

{posts.map((post) => (

{/* Image */}

{post.category} {/* Content */}

{post.title}

{post.excerpt}

{/* Meta */}

{/* Author */}

{post.author.name}

))}

) } export default Blog01 export { Blog01, type Blog01Props, type BlogPost }