code-block-tabs-demo

1import { FileJson, FileType } from "lucide-react";
2import { CodeTabs } from "@/registry/default/ui/code-block";
3 
4const tsCode = `interface User {
5  id: number;
6  name: string;
7  email: string;
8}`;
9 
10const jsonCode = `{
11  "id": 1,
12  "name": "John Doe",
13  "email": "john@example.com"
14}`;
15 
16export default function CodeBlockTabsDemo() {
17  return (
18    <div className="w-full max-w-3xl">
19      <CodeTabs
20        tabs={[
21          {
22            label: "types.ts",
23            code: tsCode,
24            language: "typescript",
25            icon: <FileType className="h-4 w-4" />,
26          },
27          {
28            label: "data.json",
29            code: jsonCode,
30            language: "json",
31            icon: <FileJson className="h-4 w-4" />,
32          },
33        ]}
34      />
35    </div>
36  );
37}