Dev Overlay

1"use client";
2
3import { useState } from "react";
4import { DevOverlay, TokenCounter } from "@/registry/ui";
5import { Textarea } from "@/components/ui/textarea";
6import { Label } from "@/components/ui/label";
7
8export function DevOverlayDefaultExample() {
9  const [text, setText] = useState(
10    "Use ⌘K / Ctrl+K to toggle the overlay. One tab shows TokenCounter; the other mirrors local state as JSON.",
11  );
12
13  return (
14    <div className="relative mx-auto min-h-[420px] w-full max-w-2xl space-y-3 rounded-lg border border-dashed border-border p-4">
15      <p className="text-muted-foreground text-sm">
16        The floating control lives in the bottom-right of the viewport (not only
17        this box). Toggle with{" "}
18        <kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono text-xs">
19          ⌘
20        </kbd>{" "}
21        /{" "}
22        <kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono text-xs">
23          Ctrl
24        </kbd>{" "}
25        +{" "}
26        <kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono text-xs">
27          K
28        </kbd>
29        .
30      </p>
31      <div className="space-y-2">
32        <Label htmlFor="dev-overlay-textarea">Draft</Label>
33        <Textarea
34          id="dev-overlay-textarea"
35          value={text}
36          onChange={(e) => setText(e.target.value)}
37          rows={8}
38          className="font-mono text-sm"
39        />
40      </div>
41
42      <DevOverlay
43        defaultTab="tokens"
44        tabs={[
45          {
46            id: "tokens",
47            label: "Tokens",
48            content: (
49              <div className="space-y-3">
50                <TokenCounter value={text} maxTokens={512} />
51                <p className="text-muted-foreground">
52                  Pair with prompts, chat inputs, or RAG context editors.
53                </p>
54              </div>
55            ),
56          },
57          {
58            id: "state",
59            label: "State",
60            content: (
61              <pre className="overflow-x-auto rounded-md border border-border bg-muted/40 p-3 text-[11px] leading-relaxed">
62                {JSON.stringify(
63                  { length: text.length, preview: text.slice(0, 120) },
64                  null,
65                  2,
66                )}
67              </pre>
68            ),
69          },
70        ]}
71      />
72    </div>
73  );
74}