"use client" /** * @name Resources 04 * @description Accordion-style expandable resource sections. * FAQ-like expandable resource sections for organized content. * * @slots resources, resources-container, resources-header, resources-heading, * resources-description, resources-accordion-list, resources-accordion-item, * resources-accordion-trigger, resources-accordion-icon, * resources-accordion-content, resources-link, resources-link-icon, * resources-link-title, resources-link-badge * @variant accordion * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { ChevronDown, BookOpen, Video, FileText, ExternalLink, } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface ResourceLinkConfig { /** Unique identifier for list key */ id: string /** Link title */ title: string /** Link destination */ href: string /** Link type */ type?: "doc" | "video" | "guide" } interface ResourceSectionConfig { /** Unique identifier for list key */ id: string /** Section title */ title: string /** Section description */ description: string /** Section links */ links: ResourceLinkConfig[] } interface Resources04Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Resource sections */ sections?: ResourceSectionConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_SECTIONS: ResourceSectionConfig[] = [ { id: "section-started", title: "Getting Started", description: "Essential guides to help you begin", links: [ { id: "link-quick", title: "Quick Start Guide", href: "#", type: "guide" }, { id: "link-install", title: "Installation Tutorial", href: "#", type: "video" }, { id: "link-basics", title: "Basic Concepts", href: "#", type: "doc" }, ], }, { id: "section-api", title: "API Reference", description: "Complete API documentation", links: [ { id: "link-rest", title: "REST API Endpoints", href: "#", type: "doc" }, { id: "link-auth", title: "Authentication", href: "#", type: "doc" }, { id: "link-webhooks", title: "Webhooks", href: "#", type: "doc" }, ], }, { id: "section-tutorials", title: "Tutorials", description: "Step-by-step learning resources", links: [ { id: "link-first", title: "Building Your First App", href: "#", type: "video" }, { id: "link-advanced", title: "Advanced Patterns", href: "#", type: "guide" }, { id: "link-best", title: "Best Practices", href: "#", type: "doc" }, ], }, ] // ============================================================================ // VARIANT LOOKUPS // ============================================================================ const TYPE_ICONS = { doc: FileText, video: Video, guide: BookOpen, } // ============================================================================ // COMPONENT // ============================================================================ function Resources04({ heading = "Resources", description = "Everything you need to get started and succeed", sections = DEFAULT_SECTIONS, className, idBase, }: Resources04Props) { const headingId = `${idBase ?? "resources-04"}-heading` const [openSections, setOpenSections] = React.useState>( new Set([sections[0]?.id]) ) const toggleSection = (sectionId: string) => { const newOpen = new Set(openSections) if (newOpen.has(sectionId)) { newOpen.delete(sectionId) } else { newOpen.add(sectionId) } setOpenSections(newOpen) } return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Accordion List */}

{sections.map((section) => { const isOpen = openSections.has(section.id) return (

{isOpen && (

{section.links.map((link) => { const Icon = link.type ? TYPE_ICONS[link.type] : FileText return ( ) })}

)}

) })}

) } export default Resources04 export { Resources04, type Resources04Props, type ResourceSectionConfig, type ResourceLinkConfig, }

{heading}

{section.title}