code-block-demo

1import { CodeBlock } from "@/registry/default/ui/code-block"
2 
3function CodeBlockDemo() {
4  return (
5    <main className=" ">
6      <div className="mx-auto space-y-8">
7        {/* Multi-tab example */}
8        <div className="space-y-3">
9          <h2 className="text-xl font-semibold">
10            Package Manager Installation
11          </h2>
12          <CodeBlock
13            tabs={[
14              {
15                label: "npm",
16                code: "npm install @acme/ui",
17                language: "bash",
18              },
19              {
20                label: "pnpm",
21                code: "pnpm add @acme/ui",
22                language: "bash",
23              },
24              {
25                label: "yarn",
26                code: "yarn add @acme/ui",
27                language: "bash",
28              },
29              {
30                label: "bun",
31                code: "bun add @acme/ui",
32                language: "bash",
33              },
34            ]}
35          />
36        </div>
37 
38        {/* Single code block example */}
39        <div className="space-y-3">
40          <h2 className="text-xl font-semibold">Single Code Block</h2>
41          <CodeBlock
42            code={`import { CodeBlock } from '@/components/code-block'
43 
44export default function Page() {
45  return (
46    <CodeBlock
47      code="console.log('Hello, world!')"
48      language="javascript"
49    />
50  )
51}`}
52            language="tsx"
53          />
54        </div>
55 
56        {/* API example */}
57        <div className="space-y-3">
58          <h2 className="text-xl font-semibold">API Configuration</h2>
59          <CodeBlock
60            tabs={[
61              {
62                label: ".env.local",
63                code: `NEXT_PUBLIC_API_URL=https://api.example.com
64API_SECRET_KEY=your-secret-key`,
65                language: "bash",
66              },
67              {
68                label: "config.ts",
69                code: `export const config = {
70  apiUrl: process.env.NEXT_PUBLIC_API_URL,
71  apiKey: process.env.API_SECRET_KEY,
72}`,
73                language: "typescript",
74              },
75            ]}
76          />
77        </div>
78      </div>
79    </main>
80  )
81}
82 
83export default CodeBlockDemo