// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Resources 03 * @description A tabbed resource center with category filtering. * Features downloadable resources, guides, and documentation. * * @slots resources, resources-container, resources-header, resources-heading, * resources-description, resources-filters, resources-search, * resources-grid, resources-card, resources-card-icon, resources-card-category, * resources-card-title, resources-card-description, resources-card-action * @variant searchable * * @registryDependencies button-link button badge input * @dependencies lucide-react */ import * as React from "react" import { FileText, Video, Download, BookOpen, ExternalLink, Search, } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" import { Badge } from "@/registry/ui/badge" import { Input } from "@/registry/ui/input" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ type ResourceType = "guide" | "video" | "template" | "documentation" interface Resource { /** Unique identifier */ id: string /** Resource title */ title: string /** Resource description */ description: string /** Resource type */ type: ResourceType /** Resource category */ category: string /** Resource URL */ href: string /** Is downloadable */ downloadable?: boolean } interface Resources03Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Resources */ resources?: Resource[] /** Categories */ categories?: string[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultResources: Resource[] = [ { id: "resource-1", title: "Getting Started Guide", description: "Learn the basics and set up your first project in minutes.", type: "guide", category: "Guides", href: "#", }, { id: "resource-2", title: "API Documentation", description: "Complete reference for all API endpoints and methods.", type: "documentation", category: "Documentation", href: "#", }, { id: "resource-3", title: "Video Tutorial: Advanced Features", description: "Deep dive into power user features and workflows.", type: "video", category: "Videos", href: "#", }, { id: "resource-4", title: "Project Template Pack", description: "Ready-to-use templates for common use cases.", type: "template", category: "Templates", href: "#", downloadable: true, }, { id: "resource-5", title: "Best Practices Guide", description: "Industry best practices for optimal results.", type: "guide", category: "Guides", href: "#", }, { id: "resource-6", title: "Integration Guide", description: "Connect with your favorite tools and services.", type: "documentation", category: "Documentation", href: "#", }, ] const defaultCategories = ["All", "Guides", "Documentation", "Videos", "Templates"] // ============================================================================ // HELPERS // ============================================================================ const typeConfig = { guide: { icon: BookOpen, color: "bg-primary/10 text-primary" }, video: { icon: Video, color: "bg-primary/10 text-primary" }, template: { icon: FileText, color: "bg-primary/10 text-primary" }, documentation: { icon: FileText, color: "bg-primary/10 text-primary" }, } // ============================================================================ // COMPONENT // ============================================================================ function Resources03({ heading = "Resource Center", description = "Everything you need to get the most out of our platform.", resources = defaultResources, categories = defaultCategories, className, }: Resources03Props) { const [activeCategory, setActiveCategory] = React.useState("All") const [searchQuery, setSearchQuery] = React.useState("") const filteredResources = React.useMemo(() => { return resources.filter((resource) => { const matchesCategory = activeCategory === "All" || resource.category === activeCategory const matchesSearch = resource.title.toLowerCase().includes(searchQuery.toLowerCase()) || resource.description.toLowerCase().includes(searchQuery.toLowerCase()) return matchesCategory && matchesSearch }) }, [resources, activeCategory, searchQuery]) return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Filters */}

{/* Category Tabs */}

{categories.map((category) => ( ))}

{/* Search */}

{/* Resources Grid */}

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

{/* Icon & Type */}

{resource.category}

{/* Content */}

{resource.title}

{resource.description}

{/* Action */}

{resource.downloadable ? ( <>

) })}

{filteredResources.length === 0 && (

No resources found matching your criteria.

)}

) } export default Resources03 export { Resources03, type Resources03Props, type Resource, type ResourceType }