// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Resources 01 * @description A resource library grid with downloadable assets. * Great for guides, ebooks, templates, and educational content. * * @slots resources, resources-container, resources-header, resources-badge, * resources-heading, resources-description, resources-grid, * resources-card, resources-card-icon, resources-card-category, * resources-card-title, resources-card-description, resources-card-link * @variant grid * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { FileText, Video, BookOpen, Download, ArrowRight } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ type ResourceType = "guide" | "ebook" | "video" | "template" interface Resource { /** Unique identifier */ id: string /** Resource type */ type: ResourceType /** Resource title */ title: string /** Resource description */ description: string /** Resource thumbnail or category */ category: string /** Download or view URL */ href: string } interface Resources01Props { /** Section badge text */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Resources list */ resources?: Resource[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultResources: Resource[] = [ { id: "resource-1", type: "guide", title: "Getting Started Guide", description: "Everything you need to know to get up and running in 10 minutes.", category: "Beginner", href: "#", }, { id: "resource-2", type: "ebook", title: "The Complete Playbook", description: "A comprehensive guide to mastering our platform for power users.", category: "Advanced", href: "#", }, { id: "resource-3", type: "video", title: "Video Tutorial Series", description: "Step-by-step video walkthroughs of key features and workflows.", category: "Tutorial", href: "#", }, { id: "resource-4", type: "template", title: "Starter Templates", description: "Pre-built templates to jumpstart your projects and save time.", category: "Templates", href: "#", }, { id: "resource-5", type: "guide", title: "Best Practices Guide", description: "Learn industry best practices and optimize your workflow.", category: "Intermediate", href: "#", }, { id: "resource-6", type: "ebook", title: "ROI Calculator Guide", description: "Calculate and demonstrate the value of your investment.", category: "Business", href: "#", }, ] const typeConfig = { guide: { icon: FileText, label: "Guide" }, ebook: { icon: BookOpen, label: "Ebook" }, video: { icon: Video, label: "Video" }, template: { icon: Download, label: "Template" }, } // ============================================================================ // COMPONENT // ============================================================================ function Resources01({ badge = "Resources", heading = "Learn and grow", description = "Explore our library of guides, tutorials, and templates to get the most out of our platform.", resources = defaultResources, className, }: Resources01Props) { return (

{/* Header */}

{badge}

{heading}

{description && (

{description}

)}

{/* Resources Grid */}

{resources.map((resource) => { const config = typeConfig[resource.type] const Icon = config.icon return (

{resource.category}

{resource.title}

{resource.description}

{resource.type === "template" ? "Download" : "Read more"}

) })}

) } export default Resources01 export { Resources01, type Resources01Props, type Resource, type ResourceType }