"use client" /** * @name Resources 05 * @description Tutorial cards with difficulty levels and progress tracking. * Learning-focused resource section with skill level indicators. * * @slots resources, resources-container, resources-header, resources-badge, * resources-heading, resources-description, resources-filters, * resources-filter, resources-grid, resources-card, resources-card-image, * resources-card-content, resources-card-meta, resources-card-difficulty, * resources-card-duration, resources-card-title, resources-card-description, * resources-card-topics, resources-card-topic, resources-card-cta * @variant tutorials * * @registryDependencies badge button button-link * @dependencies lucide-react */ import * as React from "react" import { Clock, GraduationCap, Play, Zap, Star, Trophy, type LucideIcon, } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { Button } from "@/registry/ui/button" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ type DifficultyLevel = "beginner" | "intermediate" | "advanced" interface TutorialConfig { /** Unique identifier for list key */ id: string /** Tutorial title */ title: string /** Tutorial description */ description: string /** Difficulty level */ difficulty: DifficultyLevel /** Duration in minutes */ duration: number /** Topics covered */ topics: string[] /** Tutorial URL */ href: string /** Thumbnail image */ image?: string } interface Resources05Props { /** Section badge text */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Tutorials */ tutorials?: TutorialConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_TUTORIALS: TutorialConfig[] = [ { id: "tut-react", title: "Getting Started with React", description: "Learn the fundamentals of React including components, props, and state management.", difficulty: "beginner", duration: 30, topics: ["Components", "Props", "State"], href: "#", }, { id: "tut-node", title: "Building REST APIs with Node.js", description: "Create robust APIs using Express.js with authentication and database integration.", difficulty: "intermediate", duration: 45, topics: ["Express", "MongoDB", "Auth"], href: "#", }, { id: "tut-ts", title: "Advanced TypeScript Patterns", description: "Master generics, conditional types, and advanced type inference techniques.", difficulty: "advanced", duration: 60, topics: ["Generics", "Types", "Patterns"], href: "#", }, { id: "tut-css", title: "CSS Grid Masterclass", description: "Build complex layouts with CSS Grid including responsive design patterns.", difficulty: "beginner", duration: 25, topics: ["Grid", "Layout", "Responsive"], href: "#", }, { id: "tut-zustand", title: "State Management with Zustand", description: "Simplify your React state with Zustand including persistence and devtools.", difficulty: "intermediate", duration: 35, topics: ["Zustand", "State", "React"], href: "#", }, { id: "tut-perf", title: "Performance Optimization", description: "Advanced techniques for optimizing React apps including profiling and code splitting.", difficulty: "advanced", duration: 50, topics: ["Performance", "Profiling", "Optimization"], href: "#", }, ] // ============================================================================ // VARIANT LOOKUPS // ============================================================================ const DIFFICULTY_CONFIG: Record< DifficultyLevel, { icon: LucideIcon; label: string; color: string } > = { beginner: { icon: Star, label: "Beginner", color: "text-green-600" }, intermediate: { icon: Zap, label: "Intermediate", color: "text-amber-600" }, advanced: { icon: Trophy, label: "Advanced", color: "text-red-600" }, } // ============================================================================ // COMPONENT // ============================================================================ function Resources05({ badge = "Tutorials", heading = "Learn at Your Own Pace", description = "Structured tutorials for every skill level. Track your progress and build expertise.", tutorials = DEFAULT_TUTORIALS, className, idBase, }: Resources05Props) { const headingId = `${idBase ?? "resources-05"}-heading` const [activeFilter, setActiveFilter] = React.useState< DifficultyLevel | "all" >("all") const filteredTutorials = React.useMemo(() => { if (activeFilter === "all") return tutorials return tutorials.filter((t) => t.difficulty === activeFilter) }, [tutorials, activeFilter]) const filters: { id: DifficultyLevel | "all"; label: string }[] = [ { id: "all", label: "All Levels" }, { id: "beginner", label: "Beginner" }, { id: "intermediate", label: "Intermediate" }, { id: "advanced", label: "Advanced" }, ] return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Filters */}

{filters.map((filter) => ( ))}

{/* Tutorials Grid */}

{filteredTutorials.map((tutorial) => { const difficulty = DIFFICULTY_CONFIG[tutorial.difficulty] const DifficultyIcon = difficulty.icon return (

{/* Image placeholder */}

{/* Content */}

{/* Meta */}

{/* Title & Description */}

{tutorial.title}

{tutorial.description}

{/* Topics */}

{tutorial.topics.map((topic, topicIndex) => ( {topic} ))}

{/* CTA */}

) })}

) } export default Resources05 export { Resources05, type Resources05Props, type TutorialConfig }