// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Resources 02 * @description A featured resources section with categories and filters. * Great for extensive resource libraries with multiple content types. * * @slots resources, resources-container, resources-header, resources-badge, * resources-heading, resources-description, resources-filters, * resources-featured, resources-featured-card, resources-featured-badge, * resources-featured-title, resources-featured-description, resources-featured-link, * resources-list, resources-list-item, resources-list-category, * resources-list-title, resources-list-description * @variant featured * * @registryDependencies badge button * @dependencies lucide-react */ import * as React from "react" import { FileText, Video, BookOpen, Newspaper, ArrowRight } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { Button } from "@/registry/ui/button" // ============================================================================ // TYPES // ============================================================================ type ResourceCategory = "all" | "guides" | "videos" | "ebooks" | "articles" interface Resource { /** Unique identifier */ id: string /** Resource category */ category: ResourceCategory /** Resource title */ title: string /** Resource description */ description: string /** Resource URL */ href: string /** Is featured */ featured?: boolean } interface CategoryConfig { /** Category ID */ id: ResourceCategory /** Category label */ label: string /** Category icon */ icon: React.ComponentType<{ className?: string; "aria-hidden"?: boolean | "true" | "false"; focusable?: "true" | "false" }> | null } interface Resources02Props { /** 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", category: "guides", title: "Complete Implementation Guide", description: "A step-by-step guide to implementing our solution in your organization.", href: "#", featured: true, }, { id: "resource-2", category: "videos", title: "Platform Overview", description: "A 15-minute video walkthrough of all major features.", href: "#", }, { id: "resource-3", category: "ebooks", title: "Industry Report 2024", description: "Key trends and insights shaping the industry this year.", href: "#", featured: true, }, { id: "resource-4", category: "articles", title: "10 Tips for Better Results", description: "Quick tips to optimize your workflow and boost productivity.", href: "#", }, { id: "resource-5", category: "guides", title: "API Documentation", description: "Technical documentation for developers and integrations.", href: "#", }, { id: "resource-6", category: "videos", title: "Customer Success Stories", description: "See how other companies achieved success with our platform.", href: "#", }, ] const categories: CategoryConfig[] = [ { id: "all", label: "All", icon: null }, { id: "guides", label: "Guides", icon: FileText }, { id: "videos", label: "Videos", icon: Video }, { id: "ebooks", label: "Ebooks", icon: BookOpen }, { id: "articles", label: "Articles", icon: Newspaper }, ] // ============================================================================ // COMPONENT // ============================================================================ function Resources02({ badge = "Resource Library", heading = "Everything you need to succeed", description = "Browse our collection of guides, videos, and more to help you get the most out of our platform.", resources = defaultResources, className, }: Resources02Props) { const [activeCategory, setActiveCategory] = React.useState("all") const filteredResources = React.useMemo(() => { if (activeCategory === "all") return resources return resources.filter((r) => r.category === activeCategory) }, [resources, activeCategory]) const featuredResources = filteredResources.filter((r) => r.featured) const regularResources = filteredResources.filter((r) => !r.featured) return (

{/* Header */}

{badge}