// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Download 02 * @description A resource download section with multiple downloadable items * like guides, templates, or assets. Card-based layout. * * @slots download, download-container, download-header, download-heading, * download-description, download-grid, download-card, download-card-icon, * download-card-title, download-card-description, download-card-size, * download-card-cta * @variant resources * * @registryDependencies button-link button card badge * @dependencies lucide-react */ import * as React from "react" import { Download, FileText, FileSpreadsheet, FileCode, ArrowRight } from "lucide-react" import { ButtonLink } from "@/registry/ui/button-link" import { Card, CardContent } from "@/registry/ui/card" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface DownloadItem { /** Unique identifier */ id: string /** Resource title */ title: string /** Resource description */ description: string /** File type */ type: "pdf" | "spreadsheet" | "code" | "other" /** File size */ size: string /** Download URL */ href: string /** Is new/featured */ isNew?: boolean } interface Download02Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Downloadable resources */ resources?: DownloadItem[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultResources: DownloadItem[] = [ { id: "resource-1", title: "Getting Started Guide", description: "A comprehensive guide to help you get up and running quickly.", type: "pdf", size: "2.4 MB", href: "#", isNew: true, }, { id: "resource-2", title: "Project Planning Template", description: "Ready-to-use spreadsheet for tracking your projects and milestones.", type: "spreadsheet", size: "156 KB", href: "#", }, { id: "resource-3", title: "API Documentation", description: "Complete API reference with code examples and best practices.", type: "code", size: "1.8 MB", href: "#", }, { id: "resource-4", title: "Brand Assets Pack", description: "Logos, icons, and brand guidelines for your marketing materials.", type: "other", size: "12.5 MB", href: "#", }, ] const iconMap = { pdf: FileText, spreadsheet: FileSpreadsheet, code: FileCode, other: Download, } // ============================================================================ // COMPONENT // ============================================================================ function Download02({ heading = "Resources & Downloads", description = "Free resources to help you get the most out of our platform.", resources = defaultResources, className, }: Download02Props) { return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Resources Grid */}

{resources.map((resource) => { const Icon = iconMap[resource.type] return ( {/* Icon */}

{/* Content */}

{resource.title}

{resource.isNew && ( New )}

{resource.description}

{/* Footer */}

{resource.size} Download

) })}

) } export default Download02 export { Download02, type Download02Props, type DownloadItem }