{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-block-03",
  "title": "Code Block 03",
  "description": "A simple code block",
  "dependencies": [
    "shiki"
  ],
  "registryDependencies": [
    "scroll-area",
    "tabs"
  ],
  "files": [
    {
      "path": "src/registry/blocks/radix/code-block-03/components/code-block.tsx",
      "content": "\"use client\";\n\nimport { Suspense, use } from \"react\";\nimport { codeToHtml } from \"shiki\";\nimport { cn } from \"@/lib/utils\";\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/radix/ui/tabs\";\n\nconst code = `const user = {\\n\\tname: \"John Doe\",\n\\trole: \"Frontend Developer\",\n\\texperience: \"2+ years\",\n};\n\nexport default function ProfileCard() {\n\\treturn (\n\\t\\t<div className=\"p-4 border rounded-lg\">\n\\t\\t\\t<h2 className=\"text-lg font-semibold\">{user.name}</h2>\n\\t\\t\\t<p>{user.role}</p>\n\\t\\t\\t<p className=\"text-sm text-muted-foreground\">\n\\t\\t\\t\\tExperience: {user.experience}\n\\t\\t\\t</p>\n\\t\\t</div>\n\\t);\n}\n`;\n\nconst htmlPromise = codeToHtml(code, {\n  lang: \"tsx\",\n  themes: {\n    light: \"github-light\",\n    dark: \"github-dark-default\",\n  },\n});\n\nfunction CodeBlockInner() {\n  const html = use(htmlPromise);\n\n  return (\n    <div className=\"flex min-h-dvh items-center justify-center px-6\">\n      <div className=\"rounded-lg border border-border/70 bg-muted/70 p-1 pt-0\">\n        <Tabs defaultValue=\"profile-card.tsx\">\n          <TabsList\n            className={cn(\n              \"items-end gap-2 rounded-none bg-transparent ps-2 pt-0.5 pb-0\",\n              \"*:rounded-none *:border-0 *:border-b-2 *:text-muted-foreground\",\n              \"*:data-[state=active]:border-foreground *:data-[state=active]:bg-transparent *:data-[state=active]:text-foreground *:data-[state=active]:shadow-none!\"\n            )}\n          >\n            <TabsTrigger value=\"profile-card.tsx\">profile-card.tsx</TabsTrigger>\n            <TabsTrigger value=\"profile.tsx\">profile.tsx</TabsTrigger>\n            <TabsTrigger value=\"page.tsx\">page.tsx</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <div\n          className={cn(\n            \"grid\",\n            \"[&>pre]:overflow-auto [&>pre]:rounded-lg [&>pre]:border [&>pre]:border-border/70 [&>pre]:p-6 [&>pre]:text-sm [&>pre]:leading-[1.6] [&>pre]:shadow-2xs/2 dark:[&>pre]:border-border/80\"\n          )}\n          dangerouslySetInnerHTML={{ __html: html }}\n        />\n      </div>\n    </div>\n  );\n}\n\nexport default function CodeBlock() {\n  return (\n    <Suspense>\n      <CodeBlockInner />\n    </Suspense>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}