// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Blog 06 * @description Author-focused blog layout with prominent author cards. * Great for multi-author publications and thought leadership platforms. * * @slots blog, blog-container, blog-header, blog-badge, blog-heading, * blog-description, blog-grid, blog-card, blog-card-image, * blog-card-content, blog-card-author, blog-card-author-avatar, * blog-card-author-info, blog-card-author-name, blog-card-author-role, * blog-card-title, blog-card-excerpt, blog-card-footer, blog-card-date * @variant author-focused * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Calendar, ArrowRight, User } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface AuthorConfig { /** Author name */ name: string /** Author role/title */ role: string } interface BlogPostConfig { /** Unique identifier for list key */ id: string /** Post title */ title: string /** Post excerpt */ excerpt: string /** Post category */ category: string /** Author information */ author: AuthorConfig /** Publication date */ date: string /** Post URL */ href: string } interface Blog06Props { /** 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-design-systems", title: "The Future of Design Systems", excerpt: "How modern design systems are evolving to meet the needs of growing organizations and distributed teams.", category: "Design", author: { name: "Sarah Chen", role: "Head of Design" }, date: "Jan 22, 2025", href: "#", }, { id: "post-scaling", title: "Scaling Engineering Teams", excerpt: "Lessons learned from growing our engineering team from 10 to 100 while maintaining velocity and culture.", category: "Engineering", author: { name: "Marcus Johnson", role: "VP Engineering" }, date: "Jan 20, 2025", href: "#", }, { id: "post-plg", title: "Product-Led Growth Strategies", excerpt: "How we achieved 10x growth by putting the product at the center of our go-to-market strategy.", category: "Product", author: { name: "Emily Rodriguez", role: "Chief Product Officer" }, date: "Jan 18, 2025", href: "#", }, { id: "post-remote", title: "Building Remote-First Culture", excerpt: "Creating a thriving company culture when your team is distributed across multiple time zones.", category: "Culture", author: { name: "David Park", role: "Chief People Officer" }, date: "Jan 15, 2025", href: "#", }, { id: "post-ai", title: "AI in Product Development", excerpt: "Practical applications of AI and machine learning in modern product development workflows.", category: "Technology", author: { name: "Lisa Wang", role: "AI Research Lead" }, date: "Jan 12, 2025", href: "#", }, { id: "post-cs", title: "Customer Success at Scale", excerpt: "How we transformed our customer success approach to support enterprise clients worldwide.", category: "Business", author: { name: "James Miller", role: "Customer Success Director" }, date: "Jan 10, 2025", href: "#", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Blog06({ badge = "Perspectives", heading = "From our leaders", description = "Insights and strategies from our executive team on building great products and companies.", posts = DEFAULT_POSTS, className, idBase, }: Blog06Props) { const headingId = `${idBase ?? "blog-06"}-heading` return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Blog Grid */}

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

{/* Content */}

{/* Author */}

{post.author.name} {post.author.role}

{/* Title & Excerpt */}

{post.title}

{post.excerpt}

{/* Footer */}

))}

) } export default Blog06 export { Blog06, type Blog06Props, type BlogPostConfig, type AuthorConfig }