"use client" /** * @name Download 07 * @description White paper or report download section with document preview. * Gated content with email capture option. * * @slots download, download-container, download-content, download-preview, * download-preview-image, download-info, download-badge, download-heading, * download-description, download-meta, download-meta-item, download-form, * download-form-input, download-form-button, download-highlights, * download-highlight * @variant whitepaper * * @registryDependencies button badge card input button-link * @dependencies lucide-react */ import * as React from "react" import { FileText, Download, Clock, File, Calendar, CheckCircle } from "lucide-react" import { Button } from "@/registry/ui/button" import { ButtonLink } from "@/registry/ui/button-link" import { Badge } from "@/registry/ui/badge" import { Input } from "@/registry/ui/input" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface DocumentMeta { id: string label: string value: string iconType: "clock" | "file" | "calendar" } interface Download07Props { heading?: string description?: string category?: string meta?: DocumentMeta[] highlights?: string[] gated?: boolean downloadUrl?: string onSubmit?: (email: string) => void className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultMeta: DocumentMeta[] = [ { id: "meta-1", label: "Read time", value: "15 min", iconType: "clock" }, { id: "meta-2", label: "Pages", value: "24", iconType: "file" }, { id: "meta-3", label: "Published", value: "Jan 2026", iconType: "calendar" }, ] const defaultHighlights = [ "Industry trends and market analysis", "Best practices and implementation strategies", "Case studies from leading companies", "Actionable insights and recommendations", ] // ============================================================================ // VARIANT LOOKUPS // ============================================================================ const iconMap = { clock: Clock, file: File, calendar: Calendar, } // ============================================================================ // COMPONENT // ============================================================================ function Download07({ heading = "2026 Industry Report", description = "A comprehensive analysis of market trends, emerging technologies, and strategic recommendations for the coming year.", category = "White Paper", meta = defaultMeta, highlights = defaultHighlights, gated = true, downloadUrl = "#", onSubmit, className, idBase = "download-07", }: Download07Props) { const headingId = `${idBase}-heading` const [email, setEmail] = React.useState("") const [submitted, setSubmitted] = React.useState(false) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (email) { onSubmit?.(email) setSubmitted(true) } } return (

{/* Preview */}

{/* Overlay effect */}

{/* Info */}

{heading}

{description}

{/* Meta */}

{meta.map((item) => { const Icon = iconMap[item.iconType] return (

) })}

{/* Highlights */}

{/* Form or Direct Download */} {gated && !submitted ? ( ) : ( )}

) } export default Download07 export { Download07, type Download07Props }