{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tutorial-complete",
  "type": "registry:component",
  "title": "Tutorial Complete",
  "description": "Completion screen displayed when a tutorial is finished.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/tutorial-complete/tutorial-complete.tsx",
      "content": "\"use client\";\n\nimport { memo } from \"react\";\n\nimport { Check, ChevronRight, RotateCcw } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\n\nimport { Button } from \"@vllnt/ui\";\nimport { ProfileSection } from \"@vllnt/ui\";\nimport { ShareSection } from \"@vllnt/ui\";\n\nexport type TutorialCompleteSection = {\n  id: string;\n  title: string;\n};\n\nexport type TutorialCompleteRelatedContent = {\n  href: string;\n  title: string;\n  type: string;\n};\n\nexport type TutorialCompleteLabels = {\n  backToTutorials: string;\n  profileName: string;\n  profileTagline: string;\n  relatedContent: string;\n  reviewSections: string;\n  shareOn: string;\n  shareTitle: string;\n  startOver: string;\n  tutorialComplete: string;\n  tutorialFinished: string;\n  youveCompletedAll: string;\n  youveFinishedWith: string;\n};\n\nexport type TutorialCompleteProps = {\n  backHref: string;\n  completedSections: Set<string>;\n  completionPercent: number;\n  labels: TutorialCompleteLabels;\n  /** Link component (e.g., Next.js Link) */\n  linkComponent?: React.ComponentType<{\n    children: ReactNode;\n    className?: string;\n    href: string;\n  }>;\n  onGoToSection: (index: number) => void;\n  onRestart: () => void;\n  /** Profile config */\n  profile?: {\n    imageSource: string;\n    socialLinks: { href: string; label: string }[];\n  };\n  relatedContent: TutorialCompleteRelatedContent[];\n  sections: TutorialCompleteSection[];\n  shareUrl: string;\n  title: string;\n};\n\nfunction DefaultLink({\n  children,\n  className,\n  href,\n}: {\n  children: ReactNode;\n  className?: string;\n  href: string;\n}): React.ReactNode {\n  return (\n    <a className={className} href={href}>\n      {children}\n    </a>\n  );\n}\n\n// eslint-disable-next-line max-lines-per-function -- Completion UI renders stats, achievements, and related content\nfunction TutorialCompleteImpl({\n  backHref,\n  completedSections,\n  completionPercent,\n  labels,\n  linkComponent: LinkComponent = DefaultLink,\n  onGoToSection,\n  onRestart,\n  profile,\n  relatedContent,\n  sections,\n  shareUrl,\n  title,\n}: TutorialCompleteProps): React.ReactNode {\n  const isFullyComplete = completionPercent === 100;\n\n  return (\n    <div>\n      {/* Completion Status */}\n      <div className=\"text-center py-12\">\n        <div\n          className={`inline-flex items-center justify-center size-20 rounded-full mb-6 ${\n            isFullyComplete ? \"bg-green-100 dark:bg-green-900/30\" : \"bg-muted\"\n          }`}\n        >\n          <Check\n            className={`size-10 ${isFullyComplete ? \"text-green-600 dark:text-green-400\" : \"text-muted-foreground\"}`}\n          />\n        </div>\n\n        <h2 className=\"text-3xl font-semibold mb-2\">\n          {isFullyComplete ? labels.tutorialComplete : labels.tutorialFinished}\n        </h2>\n\n        <p className=\"text-muted-foreground mb-6\">\n          {isFullyComplete\n            ? `${labels.youveCompletedAll} \"${title}\"`\n            : `${labels.youveFinishedWith} \"${title}\" (${completionPercent}%)`}\n        </p>\n\n        <Button className=\"gap-2\" onClick={onRestart} variant=\"outline\">\n          <RotateCcw className=\"size-4\" />\n          {labels.startOver}\n        </Button>\n      </div>\n\n      {/* Review Sections */}\n      <div className=\"max-w-2xl mx-auto mt-8\">\n        <h3 className=\"text-lg font-semibold mb-4\">{labels.reviewSections}</h3>\n        <div className=\"space-y-2\">\n          {sections.map((section, index) => {\n            const isCompleted = completedSections.has(section.id);\n            return (\n              <button\n                className=\"w-full flex items-center gap-3 p-3 rounded-lg border border-border hover:bg-muted/50 transition-colors text-left\"\n                key={section.id}\n                onClick={() => {\n                  onGoToSection(index);\n                }}\n                type=\"button\"\n              >\n                <div\n                  className={`flex-shrink-0 size-5 rounded-full border-2 flex items-center justify-center ${\n                    isCompleted\n                      ? \"bg-foreground border-foreground\"\n                      : \"border-muted-foreground\"\n                  }`}\n                >\n                  {isCompleted ? (\n                    <Check className=\"size-3 text-background\" />\n                  ) : null}\n                </div>\n                <span className=\"flex-1 truncate\">{section.title}</span>\n                <ChevronRight className=\"size-4 text-muted-foreground\" />\n              </button>\n            );\n          })}\n        </div>\n      </div>\n\n      {/* Related Content */}\n      {relatedContent.length > 0 ? (\n        <div className=\"max-w-2xl mx-auto mt-12\">\n          <h3 className=\"text-lg font-semibold mb-4\">\n            {labels.relatedContent}\n          </h3>\n          <div className=\"space-y-2\">\n            {relatedContent.map((item) => (\n              <LinkComponent\n                className=\"flex items-center gap-3 p-3 rounded-lg border border-border hover:bg-muted/50 transition-colors\"\n                href={item.href}\n                key={item.href}\n              >\n                <span className=\"text-xs uppercase text-muted-foreground font-medium\">\n                  {item.type}\n                </span>\n                <span className=\"flex-1 truncate\">{item.title}</span>\n                <ChevronRight className=\"size-4 text-muted-foreground\" />\n              </LinkComponent>\n            ))}\n          </div>\n        </div>\n      ) : null}\n\n      {/* Share Section */}\n      <div className=\"max-w-4xl mx-auto mt-12\">\n        <ShareSection\n          shareOn={labels.shareOn}\n          shareTitle={labels.shareTitle}\n          title={title}\n          url={shareUrl}\n        />\n      </div>\n\n      {/* Profile Section */}\n      {profile ? (\n        <div className=\"border-t border-border pt-8 mt-12\">\n          <div className=\"max-w-4xl mx-auto\">\n            <ProfileSection\n              dict={{\n                profile: {\n                  name: labels.profileName,\n                  tagline: labels.profileTagline,\n                },\n              }}\n              imageSource={profile.imageSource}\n              socialLinks={profile.socialLinks}\n            />\n          </div>\n        </div>\n      ) : null}\n\n      {/* Back Link */}\n      <div className=\"text-center pt-8\">\n        <LinkComponent\n          className=\"inline-flex items-center space-x-2 text-muted-foreground hover:text-foreground transition-colors\"\n          href={backHref}\n        >\n          <span>← {labels.backToTutorials}</span>\n        </LinkComponent>\n      </div>\n    </div>\n  );\n}\n\nexport const TutorialComplete = memo(TutorialCompleteImpl);\nTutorialComplete.displayName = \"TutorialComplete\";\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}