{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "course-player",
  "type": "registry:component",
  "title": "Course Player",
  "description": "A lesson playlist with typed per-lesson metadata and a final quiz.",
  "author": "Stepperize",
  "dependencies": [
    "@stepperize/react",
    "lucide-react"
  ],
  "registryDependencies": [],
  "categories": [
    "onboarding"
  ],
  "meta": {
    "capabilities": [
      "metadata",
      "non-linear"
    ],
    "level": "beginner",
    "tags": [
      "course",
      "lessons",
      "playlist",
      "learning",
      "metadata"
    ]
  },
  "files": [
    {
      "path": "components/stepperize/course-player.tsx",
      "type": "registry:component",
      "target": "components/stepperize/course-player.tsx",
      "content": "\"use client\";\n\nimport { defineStepper } from \"@stepperize/react\";\nimport { Check, GraduationCap, Lock, Play } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst { Stepper } = defineStepper([\n\t{ id: \"intro\", title: \"Introduction\", duration: \"3 min\" },\n\t{ id: \"lesson1\", title: \"Core concepts\", duration: \"8 min\" },\n\t{ id: \"lesson2\", title: \"Hands-on\", duration: \"12 min\" },\n\t{ id: \"quiz\", title: \"Final quiz\", duration: \"5 min\" },\n]);\n\nexport function CoursePlayerBlock() {\n\tconst [completed, setCompleted] = useState(false);\n\n\treturn (\n\t\t<Stepper.Root\n\t\t\tlinear\n\t\t\tclassName=\"w-full max-w-xl rounded-xl border bg-background p-6 shadow-sm\"\n\t\t>\n\t\t\t{({ stepper }) => (\n\t\t\t\t<div className=\"grid gap-6 sm:grid-cols-[180px_1fr]\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<div className=\"mb-3 flex items-center gap-2 text-sm font-semibold\">\n\t\t\t\t\t\t\t<GraduationCap className=\"size-4 text-primary\" />\n\t\t\t\t\t\t\tReact basics\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<Stepper.List className=\"flex flex-col gap-0.5\">\n\t\t\t\t\t\t\t<Stepper.Items>\n\t\t\t\t\t\t\t\t{(step) => (\n\t\t\t\t\t\t\t\t\t<Stepper.Item key={step.id} step={step.id}>\n\t\t\t\t\t\t\t\t\t\t<Stepper.Trigger className=\"group flex w-full items-center gap-2.5 rounded-lg px-2 py-2 text-left transition-colors disabled:cursor-not-allowed data-[status=active]:bg-muted\">\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"grid size-5 shrink-0 place-items-center rounded-full border text-muted-foreground group-data-[status=active]:border-primary group-data-[status=active]:text-primary group-data-[status=previous]:border-chart-2 group-data-[status=previous]:bg-chart-2 group-data-[status=previous]:text-white\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Check className=\"hidden size-3 group-data-[status=previous]:block\" />\n\t\t\t\t\t\t\t\t\t\t\t\t<Play className=\"hidden size-2.5 group-data-[status=active]:block\" />\n\t\t\t\t\t\t\t\t\t\t\t\t<Lock className=\"hidden size-2.5 group-data-[status=upcoming]:block\" />\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"min-w-0 flex-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Stepper.Title className=\"block truncate text-sm font-medium\" />\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</Stepper.Trigger>\n\t\t\t\t\t\t\t\t\t</Stepper.Item>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Stepper.Items>\n\t\t\t\t\t\t</Stepper.List>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"flex min-h-44 flex-col\">\n\t\t\t\t\t\t<Stepper.Content step={stepper.current.id} className=\"flex-1\">\n\t\t\t\t\t\t\t<div className=\"grid h-28 place-items-center rounded-lg bg-linear-to-br from-primary/15 to-primary/5 text-primary\">\n\t\t\t\t\t\t\t\t<Play className=\"size-8\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<h3 className=\"mt-3 text-base font-semibold\">\n\t\t\t\t\t\t\t\t{completed ? \"Course complete\" : stepper.current.title}\n\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t{completed\n\t\t\t\t\t\t\t\t\t? \"All lessons and the final quiz are finished.\"\n\t\t\t\t\t\t\t\t\t: `Lesson ${stepper.index + 1} · ${stepper.current.duration}`}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</Stepper.Content>\n\n\t\t\t\t\t\t<Stepper.Actions className=\"mt-4 flex justify-between\">\n\t\t\t\t\t\t\t<Stepper.Prev className=\"inline-flex h-9 items-center rounded-lg border bg-background px-4 text-sm font-medium transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50\">\n\t\t\t\t\t\t\t\tPrevious\n\t\t\t\t\t\t\t</Stepper.Prev>\n\t\t\t\t\t\t\t{completed ? (\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tsetCompleted(false);\n\t\t\t\t\t\t\t\t\t\tstepper.reset();\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tclassName=\"inline-flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tRestart course\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t) : stepper.isLast ? (\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tonClick={() => setCompleted(true)}\n\t\t\t\t\t\t\t\t\tclassName=\"inline-flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tFinish course\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<Stepper.Next className=\"inline-flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50\">\n\t\t\t\t\t\t\t\t\tMark complete\n\t\t\t\t\t\t\t\t</Stepper.Next>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Stepper.Actions>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Stepper.Root>\n\t);\n}\n\nexport default CoursePlayerBlock;\n"
    }
  ]
}