// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Resources 06 * @description Featured resource with sidebar list layout. Highlights one main * resource with a compact scrollable list of additional resources. * * @slots resources, resources-container, resources-header, resources-badge, * resources-heading, resources-description, resources-content, * resources-featured, resources-featured-image, resources-featured-category, * resources-featured-title, resources-featured-description, resources-featured-meta, * resources-sidebar, resources-sidebar-title, resources-list, resources-list-item, * resources-list-item-icon, resources-list-item-content, resources-list-item-title, * resources-list-item-meta, resources-view-all * @variant featured-sidebar * * @registryDependencies badge button-link * @dependencies lucide-react */ import * as React from "react" import { BookOpen, FileText, Video, Code, Download, ArrowRight, Clock, Eye, ChevronRight, type LucideIcon, } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ type ResourceType = "guide" | "tutorial" | "video" | "api" | "download" interface ResourceConfig { /** Unique identifier for list key */ id: string /** Resource title */ title: string /** Resource description */ description: string /** Resource type */ type: ResourceType /** Resource URL */ href: string /** Read time or duration */ duration?: string /** View count */ views?: number /** Is featured */ featured?: boolean /** Thumbnail image (for featured) */ image?: string } interface Resources06Props { /** Section badge text */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Resources list */ resources?: ResourceConfig[] /** View all URL */ viewAllHref?: string /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_RESOURCES: ResourceConfig[] = [ { id: "res-guide", title: "Complete Guide to Getting Started", description: "Everything you need to know to get up and running quickly. This comprehensive guide covers installation, configuration, and your first project.", type: "guide", href: "#", duration: "15 min read", views: 12500, featured: true, }, { id: "res-api", title: "API Reference Documentation", description: "Complete API reference with examples", type: "api", href: "#", duration: "Reference", views: 8200, }, { id: "res-video", title: "Video: Building Your First App", description: "Step-by-step video walkthrough", type: "video", href: "#", duration: "24 min", views: 5600, }, { id: "res-auth", title: "Authentication Tutorial", description: "Implement secure authentication", type: "tutorial", href: "#", duration: "12 min read", views: 4300, }, { id: "res-sdk", title: "Download SDK & Tools", description: "Get the latest SDK and CLI tools", type: "download", href: "#", views: 3100, }, { id: "res-best", title: "Best Practices Guide", description: "Production-ready patterns and tips", type: "guide", href: "#", duration: "20 min read", views: 6800, }, { id: "res-migration", title: "Migration Guide v2 to v3", description: "Upgrade your existing project", type: "guide", href: "#", duration: "10 min read", views: 2400, }, ] // ============================================================================ // VARIANT LOOKUPS // ============================================================================ const TYPE_CONFIG: Record< ResourceType, { icon: LucideIcon; label: string; color: string } > = { guide: { icon: BookOpen, label: "Guide", color: "bg-blue-600" }, tutorial: { icon: FileText, label: "Tutorial", color: "bg-violet-600" }, video: { icon: Video, label: "Video", color: "bg-red-600" }, api: { icon: Code, label: "API", color: "bg-emerald-600" }, download: { icon: Download, label: "Download", color: "bg-amber-600" }, } // ============================================================================ // COMPONENT // ============================================================================ function Resources06({ badge = "Resources", heading = "Documentation & Guides", description = "Everything you need to build amazing products. Guides, tutorials, and references.", resources = DEFAULT_RESOURCES, viewAllHref = "#", className, idBase, }: Resources06Props) { const headingId = `${idBase ?? "resources-06"}-heading` const featuredResource = resources.find((r) => r.featured) || resources[0] const otherResources = resources .filter((r) => r !== featuredResource) .slice(0, 6) const featuredType = TYPE_CONFIG[featuredResource.type] const FeaturedIcon = featuredType.icon return (

{/* Header */}

{heading}

{description && (

{description}

)}

View All Resources

{/* Content: Featured + Sidebar */}

{/* Featured Resource - Takes 3 columns */} {/* Image */}

{/* Content */}

{featuredResource.title}

{featuredResource.description}

{featuredResource.duration && ( )} {featuredResource.views && ( )}

{/* Sidebar List - Takes 2 columns */}

More Resources

{otherResources.map((resource) => { const type = TYPE_CONFIG[resource.type] const TypeIcon = type.icon return (

{resource.title}

{type.label} {resource.duration && ( <> · {resource.duration} )}

) })}

{/* View All CTA for sidebar */} Browse All Resources

) } export default Resources06 export { Resources06, type Resources06Props, type ResourceConfig }