"use client" /** * @name Blog 07 * @description Blog section with newsletter signup integration. * Combines content discovery with email capture for growth. * * @slots blog, blog-container, blog-content, blog-header, blog-badge, * blog-heading, blog-description, blog-grid, blog-card, * blog-card-image, blog-card-content, blog-card-category, * blog-card-title, blog-card-meta, blog-newsletter, * blog-newsletter-content, blog-newsletter-heading, * blog-newsletter-description, blog-newsletter-form, * blog-newsletter-input, blog-newsletter-submit * @variant with-newsletter * * @registryDependencies badge button input * @dependencies lucide-react */ import * as React from "react" import { Calendar, Mail, Send } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { Button } from "@/registry/ui/button" import { Input } from "@/registry/ui/input" // ============================================================================ // TYPES // ============================================================================ interface BlogPostConfig { /** Unique identifier for list key */ id: string /** Post title */ title: string /** Post category */ category: string /** Publication date */ date: string /** Post URL */ href: string } interface Blog07Props { /** Section badge text */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Blog posts */ posts?: BlogPostConfig[] /** Newsletter heading */ newsletterHeading?: string /** Newsletter description */ newsletterDescription?: string /** Newsletter placeholder */ newsletterPlaceholder?: string /** Newsletter button text */ newsletterButtonText?: string /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_POSTS: BlogPostConfig[] = [ { id: "post-funding", title: "Announcing Our Series B Funding", category: "Company News", date: "Jan 22, 2025", href: "#", }, { id: "post-design-system", title: "How We Built Our Design System", category: "Engineering", date: "Jan 20, 2025", href: "#", }, { id: "post-spotlight", title: "Customer Spotlight: Acme Corp", category: "Case Study", date: "Jan 18, 2025", href: "#", }, { id: "post-integration", title: "New Integration: Slack & Teams", category: "Product", date: "Jan 15, 2025", href: "#", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Blog07({ badge = "Updates", heading = "Latest news", description = "Stay informed with company announcements, product updates, and industry insights.", posts = DEFAULT_POSTS, newsletterHeading = "Subscribe to our newsletter", newsletterDescription = "Get the latest posts delivered directly to your inbox. No spam, unsubscribe anytime.", newsletterPlaceholder = "Enter your email", newsletterButtonText = "Subscribe", className, idBase, }: Blog07Props) { const headingId = `${idBase ?? "blog-07"}-heading` return (

{/* Blog Posts */}

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Grid */}

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

{/* Content */}

{post.category}

{post.title}

))}

{/* Newsletter Sidebar */}

{newsletterHeading}

{newsletterDescription}

) } export default Blog07 export { Blog07, type Blog07Props, type BlogPostConfig }