// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Blog 02 * @description A featured blog section with a large hero post and smaller * side posts. Great for highlighting important content. * * @slots blog, blog-container, blog-header, blog-heading, blog-view-all, * blog-featured, blog-featured-image, blog-featured-badge, * blog-featured-content, blog-featured-date, blog-featured-title, * blog-featured-excerpt, blog-featured-link, blog-side-posts, * blog-side-post, blog-side-post-image, blog-side-post-content, * blog-side-post-badge, blog-side-post-title, blog-side-post-excerpt, * blog-mobile-view-all * @variant featured * * @registryDependencies button-link badge button * @dependencies lucide-react */ import * as React from "react" import { ArrowRight, Calendar } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { ButtonLink } from "@/registry/ui/button-link" 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 /** Publish date */ date: string /** Post URL */ href: string } interface Blog02Props { /** Section heading */ heading?: string /** Featured post (large) */ featuredPost?: BlogPost /** Side posts (smaller) */ sidePosts?: BlogPost[] /** View all link */ viewAllHref?: string /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultFeaturedPost: BlogPost = { id: "featured-1", title: "Introducing Our New Design System: A Complete Guide", excerpt: "We're excited to announce the launch of our comprehensive design system. Learn how it can help streamline your development workflow and create consistent user experiences across all your products.", image: "/assets/placeholders/placeholder-16x9.svg", category: "Announcement", date: "December 18, 2024", href: "#", } const defaultSidePosts: BlogPost[] = [ { id: "side-1", title: "10 Tips for Better Component Architecture", excerpt: "Best practices for building scalable React components.", image: "/assets/placeholders/placeholder-4x3.svg", category: "Development", date: "Dec 15, 2024", href: "#", }, { id: "side-2", title: "The Art of Micro-Interactions", excerpt: "How small animations can improve user experience.", image: "/assets/placeholders/placeholder-4x3.svg", category: "Design", date: "Dec 12, 2024", href: "#", }, { id: "side-3", title: "Building for Performance First", excerpt: "Strategies for creating lightning-fast web applications.", image: "/assets/placeholders/placeholder-4x3.svg", category: "Performance", date: "Dec 10, 2024", href: "#", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Blog02({ heading = "From the blog", featuredPost = defaultFeaturedPost, sidePosts = defaultSidePosts, viewAllHref = "#", className, }: Blog02Props) { return (

{/* Header */}

{heading}

View all posts

{/* Featured Post */}

{featuredPost.category}

{featuredPost.title}

{featuredPost.excerpt}

{/* Side Posts */}

{sidePosts.map((post) => (

{post.category}

{post.title}

{post.excerpt}

{post.date}

))}

{/* Mobile View All */}

View all posts

) } export default Blog02 export { Blog02, type Blog02Props, type BlogPost }