// "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Download 04 * @description Resource download section with multiple downloadable items * like guides, templates, or assets. Card-based grid layout. * * @slots download, download-container, download-header, download-heading, * download-description, download-grid, download-card, download-card-icon, * download-card-content, download-card-title, download-card-description, * download-card-footer, download-card-button * @variant resource-list * * @registryDependencies button-link 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 { id: string title: string description: string type: "pdf" | "spreadsheet" | "code" | "other" size: string href: string isNew?: boolean } interface Download04Props { heading?: string description?: string resources?: DownloadItem[] className?: string idBase?: 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: "#", }, ] // ============================================================================ // VARIANT LOOKUPS // ============================================================================ const iconMap = { pdf: FileText, spreadsheet: FileSpreadsheet, code: FileCode, other: Download, } // ============================================================================ // COMPONENT // ============================================================================ function Download04({ heading = "Resources & Downloads", description = "Free resources to help you get the most out of our platform.", resources = defaultResources, className, idBase = "download-04", }: Download04Props) { const headingId = `${idBase}-heading` 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 Download04 export { Download04, type Download04Props }