code-block-json-demo

1"use client"
2 
3import * as React from "react"
4 
5import { CodeBlock } from "@/components/ui/code-block"
6import { Button } from "@/components/ui/button"
7 
8const jsonData = `{
9  "user": {
10    "id": "usr_2nQz7kX9pLm4",
11    "email": "sarah.chen@acme.com",
12    "name": "Sarah Chen",
13    "role": "senior_engineer",
14    "permissions": ["read", "write", "deploy"],
15    "metadata": {
16      "department": "platform",
17      "team": "infrastructure",
18      "timezone": "America/Los_Angeles"
19    }
20  },
21  "session": {
22    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9",
23    "expiresAt": "2024-12-31T23:59:59Z",
24    "refreshToken": "rt_9xKmP3vN8qL2",
25    "scopes": ["api:read", "api:write", "admin:users"]
26  },
27  "preferences": {
28    "theme": "dark",
29    "notifications": {
30      "email": true,
31      "slack": true,
32      "digest": "daily"
33    },
34    "editor": {
35      "tabSize": 2,
36      "formatOnSave": true
37    }
38  }
39}`
40 
41export default function CodeBlockJsonDemo() {
42  const [showScrollbar, setShowScrollbar] = React.useState(true)
43 
44  return (
45    <div className="flex w-full max-w-full flex-col gap-4">
46      <div className="flex items-center justify-between">
47        <span className="text-muted-foreground text-sm">
48          Scrollbar: {showScrollbar ? "Visible" : "Hidden"}
49        </span>
50        <Button
51          variant="outline"
52          size="sm"
53          onClick={() => setShowScrollbar(!showScrollbar)}
54        >
55          Toggle Scrollbar
56        </Button>
57      </div>
58      <CodeBlock
59        code={jsonData}
60        language="json"
61        filename="user-session.json"
62        showLineNumbers={true}
63        scrollbar={showScrollbar}
64      />
65    </div>
66  )
67}