github-inline-comments-demo

1"use client"
2 
3import GithubInlineComments from "@/registry/eldoraui/github-inline-comments"
4 
5export default function GithubInlineCommentsDemo() {
6  return (
7    <div className="mx-auto max-w-4xl p-4">
8      <p className="text-muted-foreground mb-4 text-sm">
9        This is a GitHub-style inline diff comments component. Hover over a line
10        in the diff to reveal the &quot;Add comment&quot; button, then click to
11        open a compact inline thread for discussion—just like reviewing code on
12        GitHub.
13      </p>
14      <GithubInlineComments
15        fileName="src/server.ts"
16        diff={[
17          { kind: "hunk", content: "@@ -10,8 +10,10 @@" },
18          {
19            kind: "context",
20            old: 10,
21            new: 10,
22            content: "export async function getUserName(id: string) {",
23          },
24          {
25            kind: "context",
26            old: 11,
27            new: 11,
28            content: "  // Fetch user from cache or database",
29          },
30          {
31            kind: "del",
32            old: 12,
33            new: null,
34            content: "  const user = cache.get(id)",
35          },
36          {
37            kind: "add",
38            old: null,
39            new: 12,
40            content: "  let user = cache.get(id)",
41          },
42          { kind: "context", old: 13, new: 13, content: "  if (!user) {" },
43          {
44            kind: "add",
45            old: null,
46            new: 14,
47            content: "    user = await db.users.findById(id)",
48          },
49          {
50            kind: "add",
51            old: null,
52            new: 15,
53            content: "    if (user) cache.set(id, user)",
54          },
55          { kind: "context", old: 14, new: 16, content: "  }" },
56          { kind: "del", old: 15, new: null, content: "  return user?.name" },
57          {
58            kind: "add",
59            old: null,
60            new: 17,
61            content: "  return user?.name ?? '(unknown)'",
62          },
63          { kind: "context", old: 16, new: 18, content: "}" },
64        ]}
65      />
66    </div>
67  )
68}