Diff Viewer

1import { DiffViewer } from "@/registry/ui/diff-viewer";
2
3const CHANGELOG_ORIGINAL = [
4  "## Authentication",
5  "",
6  "Sign in with email and password only.",
7  "",
8  "- Session expires after 24 hours",
9  "- Password reset via email link",
10  "- Admin roles managed in Clerk dashboard",
11].join("\n");
12
13const CHANGELOG_UPDATED = [
14  "## Authentication",
15  "",
16  "Sign in with email, password, or SSO (Google / GitHub).",
17  "",
18  "- Session expires after 7 days with “Remember me”",
19  "- Password reset via email link",
20  "- Optional MFA for Pro accounts",
21  "- Admin roles managed in Clerk dashboard",
22].join("\n");
23
24export function DiffViewerDefaultExample() {
25  return (
26    <div className="mx-auto w-full max-w-5xl space-y-6">
27      <p className="text-sm text-muted-foreground">
28        Compare two text versions side by side. Use the toolbar to switch split
29        vs inline view and word vs line highlighting.
30      </p>
31
32      <DiffViewer original={CHANGELOG_ORIGINAL} updated={CHANGELOG_UPDATED} />
33    </div>
34  );
35}

1import { DiffViewer } from "@/registry/ui/diff-viewer";
2
3export function DiffViewerCompactInlineExample() {
4  return (
5    <div className="space-y-3 w-2/3 mx-auto max-w-5xl">
6      <h3 className="text-sm font-medium text-muted-foreground">
7        Compact inline diff
8      </h3>
9      <DiffViewer
10        original="TT_UI_REGISTRY_TOKEN=sk_live_abc123"
11        updated="TT_UI_REGISTRY_TOKEN=sk_live_xyz789"
12        splitView={false}
13        showLineNumbers={false}
14        highlightStyle="word"
15        variant="ghost"
16        className="w-full"
17      />
18    </div>
19  );
20}

1import { DiffViewer } from "@/registry/ui";
2
3const UTIL_ORIGINAL = [
4  "export function formatPrice(cents: number) {",
5  "  return `$${(cents / 100).toFixed(2)}`;",
6  "}",
7  "",
8  "export function slugify(text: string) {",
9  '  return text.trim().toLowerCase().replace(/\\s+/g, "-");',
10  "}",
11].join("\n");
12
13const UTIL_UPDATED = [
14  "export function formatPrice(",
15  "  cents: number,",
16  "  options?: { locale?: string; currency?: string },",
17  ") {",
18  '  return new Intl.NumberFormat(options?.locale ?? "en-US", {',
19  '    style: "currency",',
20  '    currency: options?.currency ?? "USD",',
21  "  }).format(cents / 100);",
22  "}",
23  "",
24  "export function slugify(text: string) {",
25  "  return text",
26  "    .trim()",
27  "    .toLowerCase()",
28  '    .replace(/[^\\w\\s-]/g, "")',
29  '    .replace(/\\s+/g, "-");',
30  "}",
31].join("\n");
32
33export function DiffViewerCodeRefactorExample() {
34  return (
35    <div className="mx-auto w-full max-w-5xl space-y-3">
36      <p className="text-sm text-muted-foreground">
37        Word-level highlighting works well for small refactors-rename a helper,
38        extend a signature, or tighten a regex.
39      </p>
40      <DiffViewer
41        original={UTIL_ORIGINAL}
42        updated={UTIL_UPDATED}
43        highlightStyle="word"
44      />
45    </div>
46  );
47}