// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Blog 03 * @description A single hero blog post layout with full-width featured image, * author bio, and related articles section. * * @slots blog, blog-container, blog-article, blog-badge, blog-heading, * blog-meta, blog-image, blog-excerpt, blog-cta, blog-author, * blog-author-avatar, blog-author-info, blog-related, * blog-related-heading, blog-related-grid, blog-related-post, * blog-related-image, blog-related-badge, blog-related-title * @variant hero * * @registryDependencies button-link badge button * @dependencies lucide-react */ import * as React from "react" import { Calendar, Clock, ArrowRight } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { ButtonLink } from "@/registry/ui/button-link" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface Author { /** Author name */ name: string /** Author role/title */ role?: string /** Author avatar URL */ avatar?: string } interface RelatedPost { /** Unique identifier */ id: string /** Post title */ title: string /** Post category */ category: string /** Post URL */ href: string /** Featured image */ image?: string } interface Blog03Props { /** Post category/tag */ category?: string /** Post title */ title?: string /** Post excerpt */ excerpt?: string /** Featured image URL */ image?: string /** Author info */ author?: Author /** Publication date */ date?: string /** Reading time */ readTime?: string /** Link to full article */ href?: string /** Related posts */ relatedPosts?: RelatedPost[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultAuthor: Author = { name: "Sarah Johnson", role: "Product Manager", avatar: "/assets/placeholders/avatar-placeholder.svg", } const defaultRelatedPosts: RelatedPost[] = [ { id: "related-1", title: "Getting Started with Our Platform", category: "Tutorial", href: "#", image: "/assets/placeholders/placeholder-4x3.svg", }, { id: "related-2", title: "Best Practices for Team Collaboration", category: "Guide", href: "#", image: "/assets/placeholders/placeholder-4x3.svg", }, { id: "related-3", title: "What's New in Version 2.0", category: "Updates", href: "#", image: "/assets/placeholders/placeholder-4x3.svg", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Blog03({ category = "Product Updates", title = "Introducing Our New Dashboard Experience", excerpt = "We've completely redesigned our dashboard to help you work faster and smarter. Discover the new features that will transform how you manage your projects and collaborate with your team.", image = "/assets/placeholders/placeholder-3x1.svg", author = defaultAuthor, date = "December 15, 2024", readTime = "5 min read", href = "#", relatedPosts = defaultRelatedPosts, className, }: Blog03Props) { return (

{/* Hero Post */}

{/* Category Badge */} {category && ( {category} )} {/* Title */}