code-block-variants-demo

1import { CodeBlock } from "@/registry/default/ui/code-block";
2 
3const code = `function calculateSum(a: number, b: number): number {
4  return a + b;
5}`;
6 
7export default function CodeBlockVariantsDemo() {
8  return (
9    <div className="grid w-full max-w-3xl gap-8">
10      <div className="space-y-2">
11        <h3 className="font-medium text-muted-foreground text-sm">Default</h3>
12        <CodeBlock code={code} language="typescript" variant="default" />
13      </div>
14 
15      <div className="space-y-2">
16        <h3 className="font-medium text-muted-foreground text-sm">Terminal</h3>
17        <CodeBlock code={code} language="typescript" variant="terminal" />
18      </div>
19 
20      <div className="space-y-2">
21        <h3 className="font-medium text-muted-foreground text-sm">Minimal</h3>
22        <CodeBlock code={code} language="typescript" variant="minimal" />
23      </div>
24 
25      <div className="space-y-2">
26        <h3 className="font-medium text-muted-foreground text-sm">Gradient</h3>
27        <CodeBlock code={code} language="typescript" variant="gradient" />
28      </div>
29 
30      <div className="space-y-2">
31        <h3 className="font-medium text-muted-foreground text-sm">Glass</h3>
32        <div className="rounded-xl bg-gradient-to-br from-purple-500/20 to-blue-500/20 p-8">
33          <CodeBlock code={code} language="typescript" variant="glass" />
34        </div>
35      </div>
36    </div>
37  );
38}