{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "course-curriculum-outline",
  "title": "Course Curriculum Outline",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/course-curriculum-outline/CourseCurriculumOutline.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n  Award,\n  Check,\n  CheckCircle2,\n  Circle,\n  Clock,\n  Download,\n  ExternalLink,\n  FileCode,\n  FileQuestion,\n  FileText,\n  FlaskConical,\n  GraduationCap,\n  Lock,\n  MessageSquare,\n  PenTool,\n  Play,\n  PlayCircle,\n  ShieldCheck,\n  Star,\n  Users,\n  Video,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\n\nexport interface Lesson {\n  id: string\n  title: string\n  duration: string\n  type: 'Video' | 'Interactive Lab' | 'Quiz'\n  status: 'completed' | 'in-progress' | 'not-started' | 'locked'\n}\n\nexport interface Module {\n  id: string\n  title: string\n  duration: string\n  lessonsCount: string\n  completedCount: number\n  totalCount: number\n  status: 'completed' | 'in-progress' | 'locked'\n  lessons: Lesson[]\n}\n\ninterface Resource {\n  id: string\n  title: string\n  meta: string\n  type: 'figma' | 'repo' | 'pdf'\n}\n\nexport interface CourseCurriculumOutlineProps {\n  /** Seed completed state for all lessons to preview the verified certificate state. */\n  initialComplete?: boolean\n  className?: string\n}\n\nconst defaultModules: Module[] = [\n  {\n    id: 'module-1',\n    title: 'Module 1: Design Tokens & OKLCH Architecture',\n    duration: '1h 45m',\n    lessonsCount: '4 lessons',\n    completedCount: 4,\n    totalCount: 4,\n    status: 'completed',\n    lessons: [\n      {\n        id: 'm1-l1',\n        title: 'Introduction to OKLCH & Gamut Mapping',\n        duration: '18m',\n        type: 'Video',\n        status: 'completed',\n      },\n      {\n        id: 'm1-l2',\n        title: 'Configuring Semantic Tokens in Tailwind CSS v4',\n        duration: '26m',\n        type: 'Video',\n        status: 'completed',\n      },\n      {\n        id: 'm1-l3',\n        title: 'Lab: Building an Automated Contrast Checker',\n        duration: '35m',\n        type: 'Interactive Lab',\n        status: 'completed',\n      },\n      {\n        id: 'm1-l4',\n        title: 'Quiz: Token Architecture & Dark Mode Strategy',\n        duration: '26m',\n        type: 'Quiz',\n        status: 'completed',\n      },\n    ],\n  },\n  {\n    id: 'module-2',\n    title: 'Module 2: Polymorphic Primitives & Headless Reka UI',\n    duration: '3h 10m',\n    lessonsCount: '6 lessons',\n    completedCount: 3,\n    totalCount: 6,\n    status: 'in-progress',\n    lessons: [\n      {\n        id: 'm2-l1',\n        title: 'Anatomy of Headless Primitives with Reka UI & Radix',\n        duration: '24m',\n        type: 'Video',\n        status: 'completed',\n      },\n      {\n        id: 'm2-l2',\n        title: 'Building Polymorphic Button & Slot Mechanics',\n        duration: '32m',\n        type: 'Video',\n        status: 'completed',\n      },\n      {\n        id: 'm2-l3',\n        title: 'Lab: Compound Component Patterns with Provide/Inject',\n        duration: '40m',\n        type: 'Interactive Lab',\n        status: 'completed',\n      },\n      {\n        id: 'm2-l4',\n        title: 'Accessible Dialog, Popover & Focus Trapping',\n        duration: '36m',\n        type: 'Video',\n        status: 'in-progress',\n      },\n      {\n        id: 'm2-l5',\n        title: 'Virtualization for High-Density Data Grids',\n        duration: '38m',\n        type: 'Video',\n        status: 'not-started',\n      },\n      {\n        id: 'm2-l6',\n        title: 'Quiz: Accessibility Tree & ARIA Roles',\n        duration: '20m',\n        type: 'Quiz',\n        status: 'not-started',\n      },\n    ],\n  },\n  {\n    id: 'module-3',\n    title: 'Module 3: Micro-Interactions & Spring Physics',\n    duration: '4h 50m',\n    lessonsCount: '8 lessons',\n    completedCount: 0,\n    totalCount: 8,\n    status: 'locked',\n    lessons: [\n      {\n        id: 'm3-l1',\n        title: 'Physics-Based Animation Principles with Spring Physics',\n        duration: '28m',\n        type: 'Video',\n        status: 'locked',\n      },\n      {\n        id: 'm3-l2',\n        title: 'Gesture Interactions & Drag-and-Drop Primitives',\n        duration: '35m',\n        type: 'Interactive Lab',\n        status: 'locked',\n      },\n      {\n        id: 'm3-l3',\n        title: 'Layout Animations and Shared Element Transitions',\n        duration: '42m',\n        type: 'Video',\n        status: 'locked',\n      },\n      {\n        id: 'm3-l4',\n        title: 'Haptic Feedback & Tactile States in Web Interfaces',\n        duration: '25m',\n        type: 'Video',\n        status: 'locked',\n      },\n      {\n        id: 'm3-l5',\n        title: 'Optimizing 60fps / 120fps Rendering Pipelines',\n        duration: '45m',\n        type: 'Video',\n        status: 'locked',\n      },\n      {\n        id: 'm3-l6',\n        title: 'Lab: Crafting a Fluid Floating Command Palette',\n        duration: '50m',\n        type: 'Interactive Lab',\n        status: 'locked',\n      },\n      {\n        id: 'm3-l7',\n        title: 'Sound Design & Audio Micro-Feedback',\n        duration: '25m',\n        type: 'Video',\n        status: 'locked',\n      },\n      {\n        id: 'm3-l8',\n        title: 'Quiz: Motion Reduction & Animation Performance',\n        duration: '20m',\n        type: 'Quiz',\n        status: 'locked',\n      },\n    ],\n  },\n  {\n    id: 'module-4',\n    title: 'Module 4: Monorepo Architecture & CI Distribution',\n    duration: '4h 45m',\n    lessonsCount: '6 lessons',\n    completedCount: 0,\n    totalCount: 6,\n    status: 'locked',\n    lessons: [\n      {\n        id: 'm4-l1',\n        title: 'Turborepo & pnpm Workspaces Setup from Scratch',\n        duration: '35m',\n        type: 'Video',\n        status: 'locked',\n      },\n      {\n        id: 'm4-l2',\n        title: 'Dual-Framework Export Pipelines (Vue 3 + React 19)',\n        duration: '45m',\n        type: 'Video',\n        status: 'locked',\n      },\n      {\n        id: 'm4-l3',\n        title: 'Registry Distribution Schema & JSON Manifest Generator',\n        duration: '50m',\n        type: 'Video',\n        status: 'locked',\n      },\n      {\n        id: 'm4-l4',\n        title: 'Lab: Custom CLI Tooling with npx shadcn add',\n        duration: '55m',\n        type: 'Interactive Lab',\n        status: 'locked',\n      },\n      {\n        id: 'm4-l5',\n        title: 'Automated Visual Regression CI with Playwright',\n        duration: '40m',\n        type: 'Interactive Lab',\n        status: 'locked',\n      },\n      {\n        id: 'm4-l6',\n        title: 'Capstone Project: Publishing Your Own Component Registry',\n        duration: '60m',\n        type: 'Interactive Lab',\n        status: 'locked',\n      },\n    ],\n  },\n]\n\nconst resources: Resource[] = [\n  {\n    id: 'res-figma',\n    title: 'Figma Design System Kit v4.2',\n    meta: '.fig · 48.2 MB',\n    type: 'figma',\n  },\n  {\n    id: 'res-repo',\n    title: 'Course Starter Monorepo Template',\n    meta: 'GitHub Template · Public',\n    type: 'repo',\n  },\n  {\n    id: 'res-tokens',\n    title: 'OKLCH & Color Tokens Cheatsheet',\n    meta: 'PDF Guide · 2.4 MB',\n    type: 'pdf',\n  },\n  {\n    id: 'res-wcag',\n    title: 'WCAG 2.2 AA Contrast Matrix',\n    meta: 'PDF Reference · 1.8 MB',\n    type: 'pdf',\n  },\n]\n\nexport function CourseCurriculumOutline({ initialComplete = false, className }: CourseCurriculumOutlineProps) {\n  const modules = React.useMemo(() => {\n    if (initialComplete) {\n      return defaultModules.map((m) => ({\n        ...m,\n        status: 'completed' as const,\n        completedCount: m.totalCount,\n        lessons: m.lessons.map((l) => ({\n          ...l,\n          status: 'completed' as const,\n        })),\n      }))\n    }\n    return defaultModules\n  }, [initialComplete])\n\n  const completedLessonsCount = initialComplete ? 24 : 8\n  const totalLessonsCount = 24\n  const progressPercent = Math.round((completedLessonsCount / totalLessonsCount) * 100)\n  const isFullyCompleted = completedLessonsCount === totalLessonsCount\n\n  return (\n    <div data-slot=\"course-curriculum-outline\" className={cn('text-foreground w-full space-y-6', className)}>\n      {/* Course Hero Header */}\n      <Card className=\"border-border bg-card shadow-xs\">\n        <CardHeader className=\"space-y-4\">\n          <div className=\"flex flex-wrap items-center justify-between gap-3\">\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <Badge variant=\"secondary\" className=\"font-medium\">\n                Advanced · 14.5 Total Hours\n              </Badge>\n              <Badge variant=\"outline\" className=\"text-muted-foreground\">\n                Design Engineering\n              </Badge>\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n              <div className=\"text-warning flex items-center\">\n                <Star className=\"size-3.5 fill-current\" aria-hidden=\"true\" />\n                <span className=\"text-foreground ml-1 font-semibold\">4.9</span>\n              </div>\n              <span>·</span>\n              <span className=\"tabular-nums\">(1,840 students)</span>\n            </div>\n          </div>\n\n          <div className=\"space-y-2\">\n            <CardTitle className=\"text-2xl font-bold tracking-tight sm:text-3xl\">\n              Full-Stack Design Systems with Vue & React\n            </CardTitle>\n            <CardDescription className=\"text-sm\">\n              Master enterprise-grade UI components, OKLCH color spaces, headless architecture with Reka UI, fluid\n              spring physics, and monorepo package distribution.\n            </CardDescription>\n          </div>\n\n          <div className=\"flex flex-wrap items-center justify-between gap-4 pt-1\">\n            <div className=\"flex items-center gap-3\">\n              <Avatar className=\"border-border size-10 border\">\n                <AvatarImage\n                  src=\"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=96&h=96&fit=crop&crop=faces\"\n                  alt=\"Marcus Vance\"\n                />\n                <AvatarFallback>MV</AvatarFallback>\n              </Avatar>\n              <div>\n                <p className=\"text-sm leading-none font-medium\">Marcus Vance</p>\n                <p className=\"text-muted-foreground mt-1 text-xs\">Principal Design Engineer</p>\n              </div>\n            </div>\n\n            <div className=\"flex flex-wrap items-center gap-2.5\">\n              {!isFullyCompleted ? (\n                <Button className=\"gap-2 shadow-xs\">\n                  <Play className=\"size-4 fill-current\" aria-hidden=\"true\" />\n                  Resume Learning\n                </Button>\n              ) : (\n                <Button aria-label=\"Download attachment\" className=\"gap-2 shadow-xs\">\n                  <Award className=\"size-4\" aria-hidden=\"true\" />\n                  Download Certificate\n                </Button>\n              )}\n              <Button aria-label=\"Download attachment\" variant=\"outline\" className=\"gap-2\">\n                <Download className=\"size-4\" aria-hidden=\"true\" />\n                Download Resources\n              </Button>\n            </div>\n          </div>\n        </CardHeader>\n\n        <CardContent className=\"pt-0\">\n          <div className=\"border-border/60 bg-muted/40 space-y-2 rounded-lg border p-4\">\n            <div className=\"flex items-center justify-between text-xs\">\n              <span className=\"text-foreground font-medium\">\n                <span className=\"tabular-nums\">\n                  {completedLessonsCount} of {totalLessonsCount}\n                </span>{' '}\n                lessons completed\n              </span>\n              <span className=\"text-muted-foreground font-medium tabular-nums\">{progressPercent}%</span>\n            </div>\n            <Progress value={progressPercent} />\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Main Content & Sidebar Grid */}\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n        {/* Left Column: Modular Curriculum Accordions */}\n        <div className=\"space-y-4 lg:col-span-2\">\n          <div className=\"flex items-center justify-between px-1\">\n            <div>\n              <h2 className=\"text-lg font-semibold tracking-tight\">Course Curriculum</h2>\n              <p className=\"text-muted-foreground text-xs\">4 modular sections · 24 total lessons & interactive labs</p>\n            </div>\n            <div className=\"text-muted-foreground text-xs tabular-nums\">\n              <span className=\"text-foreground font-medium\">\n                {completedLessonsCount}/{totalLessonsCount}\n              </span>{' '}\n              Completed\n            </div>\n          </div>\n\n          <Accordion type=\"multiple\" defaultValue={['module-1', 'module-2']} variant=\"separated\">\n            {modules.map((module) => (\n              <AccordionItem key={module.id} value={module.id}>\n                <AccordionTrigger className=\"hover:no-underline\">\n                  <div className=\"flex flex-1 items-center justify-between gap-3 pr-2 text-left\">\n                    <div className=\"flex min-w-0 items-center gap-3\">\n                      {module.status === 'completed' ? (\n                        <span className=\"border-success/30 bg-success/15 text-success flex size-7 shrink-0 items-center justify-center rounded-full border shadow-xs\">\n                          <Check className=\"size-3.5\" aria-hidden=\"true\" />\n                        </span>\n                      ) : module.status === 'in-progress' ? (\n                        <span className=\"border-primary/20 bg-primary/10 text-primary flex size-7 shrink-0 items-center justify-center rounded-full border\">\n                          <Play className=\"size-3.5 fill-current\" aria-hidden=\"true\" />\n                        </span>\n                      ) : (\n                        <span className=\"border-border bg-muted text-muted-foreground flex size-7 shrink-0 items-center justify-center rounded-full border\">\n                          <Lock className=\"size-3.5\" aria-hidden=\"true\" />\n                        </span>\n                      )}\n                      <div className=\"min-w-0\">\n                        <p className=\"text-foreground truncate text-sm font-semibold\">{module.title}</p>\n                        <p className=\"text-muted-foreground mt-0.5 text-xs tabular-nums\">\n                          {module.lessonsCount} · {module.duration} ·{' '}\n                          {module.status === 'completed' ? (\n                            <span className=\"text-success font-medium\">100% completed</span>\n                          ) : module.status === 'in-progress' ? (\n                            <span className=\"text-foreground font-medium\">\n                              {module.completedCount}/{module.totalCount} completed\n                            </span>\n                          ) : (\n                            <span className=\"text-muted-foreground\">Locked</span>\n                          )}\n                        </p>\n                      </div>\n                    </div>\n\n                    <div className=\"hidden shrink-0 items-center gap-2 sm:flex\">\n                      {module.status === 'completed' ? (\n                        <Badge variant=\"success\" className=\"gap-1 text-xs\">\n                          <Check className=\"size-3\" /> Completed\n                        </Badge>\n                      ) : module.status === 'in-progress' ? (\n                        <Badge variant=\"secondary\" className=\"text-xs\">\n                          In Progress ({module.completedCount}/{module.totalCount})\n                        </Badge>\n                      ) : (\n                        <Badge variant=\"outline\" className=\"text-muted-foreground gap-1 text-xs\">\n                          <Lock className=\"size-3\" /> Locked\n                        </Badge>\n                      )}\n                    </div>\n                  </div>\n                </AccordionTrigger>\n\n                <AccordionContent>\n                  <div className=\"border-border divide-border divide-y border-t\">\n                    {module.lessons.map((lesson) => (\n                      <div\n                        key={lesson.id}\n                        className=\"group hover:bg-muted/40 flex items-center justify-between gap-3 px-2 py-3 transition-colors first:pt-3 last:pb-1 sm:px-3\"\n                      >\n                        <div className=\"flex min-w-0 items-center gap-3\">\n                          <div className=\"flex shrink-0 items-center justify-center\">\n                            {lesson.status === 'completed' ? (\n                              <CheckCircle2 className=\"text-success size-4\" aria-hidden=\"true\" />\n                            ) : lesson.status === 'in-progress' ? (\n                              <PlayCircle className=\"text-primary size-4 animate-pulse\" aria-hidden=\"true\" />\n                            ) : lesson.status === 'locked' ? (\n                              <Lock className=\"text-muted-foreground/50 size-4\" aria-hidden=\"true\" />\n                            ) : (\n                              <Circle className=\"text-muted-foreground/60 size-4\" aria-hidden=\"true\" />\n                            )}\n                          </div>\n\n                          <div className=\"min-w-0\">\n                            <p\n                              className={cn(\n                                'truncate text-sm font-medium transition-colors',\n                                lesson.status === 'locked'\n                                  ? 'text-muted-foreground'\n                                  : 'text-foreground group-hover:text-primary',\n                              )}\n                            >\n                              {\n                                {\n                                  ...lesson,\n                                }.title\n                              }\n                            </p>\n                          </div>\n                        </div>\n\n                        <div className=\"flex shrink-0 items-center gap-2\">\n                          {lesson.type === 'Interactive Lab' ? (\n                            <Badge variant=\"secondary\" className=\"gap-1 text-xs\">\n                              <FlaskConical className=\"size-3\" aria-hidden=\"true\" />\n                              <span className=\"hidden sm:inline\">Interactive Lab</span>\n                              <span className=\"sm:hidden\">Lab</span>\n                            </Badge>\n                          ) : lesson.type === 'Quiz' ? (\n                            <Badge variant=\"outline\" className=\"gap-1 text-xs\">\n                              <FileQuestion className=\"size-3\" aria-hidden=\"true\" />\n                              Quiz\n                            </Badge>\n                          ) : (\n                            <Badge variant=\"outline\" className=\"gap-1 text-xs\">\n                              <Video className=\"size-3\" aria-hidden=\"true\" />\n                              Video\n                            </Badge>\n                          )}\n\n                          <span className=\"text-muted-foreground min-w-[32px] text-right font-mono text-xs tabular-nums\">\n                            {lesson.duration}\n                          </span>\n\n                          <div className=\"hidden sm:block\">\n                            {lesson.status === 'in-progress' ? (\n                              <Button size=\"sm\" className=\"h-7 gap-1 px-2.5 text-xs\">\n                                <Play className=\"size-3 fill-current\" /> Resume\n                              </Button>\n                            ) : lesson.status === 'completed' ? (\n                              <Button\n                                variant=\"ghost\"\n                                size=\"sm\"\n                                className=\"text-muted-foreground hover:text-foreground h-7 px-2 text-xs\"\n                              >\n                                Review\n                              </Button>\n                            ) : lesson.status === 'not-started' ? (\n                              <Button variant=\"outline\" size=\"sm\" className=\"h-7 px-2 text-xs\">\n                                Start\n                              </Button>\n                            ) : (\n                              <span className=\"text-muted-foreground/50 px-2 text-xs\">Locked</span>\n                            )}\n                          </div>\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </div>\n\n        {/* Right Column: Certificate & Resources Sidebar */}\n        <div className=\"space-y-6\">\n          {/* Certificate Card */}\n          <Card>\n            <CardHeader className=\"pb-3\">\n              <div className=\"flex items-center gap-2\">\n                <GraduationCap className=\"text-primary size-5\" aria-hidden=\"true\" />\n                <CardTitle className=\"text-base\">Certificate of Completion</CardTitle>\n              </div>\n              <CardDescription className=\"text-xs\">\n                Accredited credential upon 100% course and lab completion.\n              </CardDescription>\n            </CardHeader>\n\n            <CardContent className=\"space-y-4\">\n              {/* Cert preview container */}\n              <div className=\"border-border/80 from-muted/50 to-muted/20 relative space-y-3 overflow-hidden rounded-lg border bg-gradient-to-b p-4 text-center\">\n                <div className=\"relative z-10 space-y-2\">\n                  <div\n                    className={cn(\n                      'mx-auto flex size-12 items-center justify-center rounded-full border shadow-xs',\n                      isFullyCompleted\n                        ? 'border-success/30 bg-success/15 text-success'\n                        : 'border-primary/30 bg-primary/10 text-primary',\n                    )}\n                  >\n                    <Award className=\"size-6\" aria-hidden=\"true\" />\n                  </div>\n                  <div>\n                    <p className=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                      Verified Credential\n                    </p>\n                    <p className=\"text-foreground mt-0.5 text-sm font-bold\">Full-Stack Design Systems</p>\n                    <p className=\"text-muted-foreground text-xs\">Marcus Vance · UIPKGE Academy</p>\n                  </div>\n                  <div className=\"pt-1\">\n                    <span className=\"border-border bg-background/80 text-muted-foreground inline-flex items-center gap-1 rounded border px-2 py-0.5 font-mono text-xs\">\n                      <ShieldCheck className=\"text-primary size-3\" /> CERT-8841-FS\n                    </span>\n                  </div>\n                </div>\n              </div>\n\n              {/* Progress info */}\n              <div className=\"space-y-1.5\">\n                <div className=\"flex items-center justify-between text-xs\">\n                  <span className=\"text-muted-foreground\">Graduation Status</span>\n                  <span className=\"text-foreground font-medium tabular-nums\">\n                    {completedLessonsCount}/{totalLessonsCount} Lessons\n                  </span>\n                </div>\n                <Progress value={progressPercent} />\n                <p className=\"text-muted-foreground pt-1 text-xs\">\n                  {isFullyCompleted ? (\n                    <span className=\"text-success font-medium\">\n                      All requirements satisfied! Your certificate is ready to download and share.\n                    </span>\n                  ) : (\n                    <span>\n                      Complete the remaining {totalLessonsCount - completedLessonsCount} lessons and labs to unlock.\n                    </span>\n                  )}\n                </p>\n              </div>\n            </CardContent>\n\n            <CardFooter>\n              {isFullyCompleted ? (\n                <Button aria-label=\"Download attachment\" className=\"w-full gap-1.5\" size=\"sm\">\n                  <Download className=\"size-4\" /> Download PDF Certificate\n                </Button>\n              ) : (\n                <Button variant=\"outline\" size=\"sm\" className=\"w-full gap-1.5\" disabled>\n                  <Lock className=\"size-4\" /> Locked (Complete Course)\n                </Button>\n              )}\n            </CardFooter>\n          </Card>\n\n          {/* Course Resources Card */}\n          <Card>\n            <CardHeader className=\"pb-3\">\n              <div className=\"flex items-center gap-2\">\n                <FileCode className=\"text-primary size-5\" aria-hidden=\"true\" />\n                <CardTitle className=\"text-base\">Course Resources</CardTitle>\n              </div>\n              <CardDescription className=\"text-xs\">\n                Downloadable starter kits, Figma files, and spec guides.\n              </CardDescription>\n            </CardHeader>\n\n            <CardContent className=\"space-y-2.5\">\n              {resources.map((res) => (\n                <div\n                  key={res.id}\n                  className=\"border-border hover:bg-muted/40 flex items-center justify-between gap-3 rounded-md border p-2.5 transition-colors\"\n                >\n                  <div className=\"flex min-w-0 items-center gap-2.5\">\n                    <span className=\"bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-md\">\n                      {res.type === 'repo' ? (\n                        <FileCode className=\"size-4\" aria-hidden=\"true\" />\n                      ) : res.type === 'figma' ? (\n                        <PenTool className=\"size-4\" aria-hidden=\"true\" />\n                      ) : (\n                        <FileText className=\"size-4\" aria-hidden=\"true\" />\n                      )}\n                    </span>\n                    <div className=\"min-w-0\">\n                      <p className=\"text-foreground truncate text-xs font-medium\">{res.title}</p>\n                      <p className=\"text-muted-foreground text-xs\">{res.meta}</p>\n                    </div>\n                  </div>\n\n                  <Button\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"text-muted-foreground hover:text-foreground size-8 shrink-0\"\n                  >\n                    {res.type === 'repo' ? (\n                      <ExternalLink className=\"size-4\" aria-hidden=\"true\" />\n                    ) : (\n                      <Download className=\"size-4\" aria-hidden=\"true\" />\n                    )}\n                    <span className=\"sr-only\">Download {res.title}</span>\n                  </Button>\n                </div>\n              ))}\n            </CardContent>\n          </Card>\n\n          {/* Community & Mentorship Card */}\n          <Card>\n            <CardHeader className=\"pb-3\">\n              <div className=\"flex items-center gap-2\">\n                <Users className=\"text-primary size-5\" aria-hidden=\"true\" />\n                <CardTitle className=\"text-base\">Student Community</CardTitle>\n              </div>\n              <CardDescription className=\"text-xs\">\n                Connect with peers and get code reviews from design engineering mentors.\n              </CardDescription>\n            </CardHeader>\n\n            <CardContent className=\"text-muted-foreground space-y-2.5 text-xs\">\n              <div className=\"flex items-center gap-2\">\n                <span className=\"bg-success size-2 rounded-full\" />\n                <span>\n                  <strong className=\"text-foreground\">1,420 students online</strong> in Discord\n                </span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <Clock className=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n                <span>\n                  Weekly live Q&A: <strong className=\"text-foreground\">Thursdays @ 5:00 PM UTC</strong>\n                </span>\n              </div>\n            </CardContent>\n\n            <CardFooter>\n              <Button variant=\"outline\" size=\"sm\" className=\"w-full gap-1.5\">\n                <MessageSquare className=\"size-4\" /> Join Discord Community\n              </Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/CourseCurriculumOutline.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/accordion.json",
    "https://uipkge.dev/r/react/avatar.json",
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/progress.json"
  ],
  "description": "LMS and video course syllabus block: hero header with course metadata, instructor profile, rating, progress bar, and action buttons, collapsible modular section accordions with lesson durations, type badges, and completion checks, plus a sidebar with verifiable certificate preview, downloadable course resources, and student community access.",
  "categories": [
    "education",
    "app"
  ]
}