Diff Viewer

1import { Diff, Hunk } from "@/registry/ui/diff";
2 
3import {
4  CollapsibleCard,
5  CollapsibleCardHeader,
6  CollapsibleCardTitle,
7  CollapsibleCardContent,
8} from "@/registry/ui/collapsible-card";
9 
10import { parseDiff, ParseOptions } from "@/registry/ui/diff/utils/parse";
11 
12export function DiffViewer({
13  patch,
14  options = {},
15}: {
16  patch: string;
17  options?: Partial<ParseOptions>;
18}) {
19  const [file] = parseDiff(patch, options);
20 
21  return (
22    <CollapsibleCard
23      data-section-id="diff-viewer"
24      id="diff-viewer"
25      className="my-4 text-[0.8rem] w-full"
26      title="File Changes"
27      defaultOpen
28    >
29      <CollapsibleCardHeader>
30        <CollapsibleCardTitle title={file.newPath}>
31          {file.newPath}
32        </CollapsibleCardTitle>
33      </CollapsibleCardHeader>
34      <CollapsibleCardContent>
35        <Diff fileName="file-changes.tsx" hunks={file.hunks} type={file.type}>
36          {file.hunks.map((hunk) => (
37            <Hunk key={hunk.content} hunk={hunk} />
38          ))}
39        </Diff>
40      </CollapsibleCardContent>
41    </CollapsibleCard>
42  );
43}