/ components / DiffHunk.tsx
DiffHunk.tsx
 1  import { FilePathLink } from '@/components/FilePathLink';
 2  import type { DiffHunk as DiffHunkType } from '@/lib/types';
 3  
 4  interface Props {
 5    hunk: DiffHunkType;
 6    showFileHeader?: boolean;
 7    gitFileUrlBase?: string | null;
 8  }
 9  
10  export function DiffHunk({ hunk, showFileHeader = true, gitFileUrlBase }: Props) {
11    return (
12      <div className="rounded-md border overflow-x-auto">
13        {showFileHeader && (
14          <div className="bg-muted/50 px-3 py-2 font-mono text-xs text-muted-foreground border-b truncate">
15            <FilePathLink filePath={hunk.filePath} gitFileUrlBase={gitFileUrlBase} />
16          </div>
17        )}
18        {hunk.hunkHeader && (
19          <div className="bg-muted/30 px-3 py-1 font-mono text-xs text-muted-foreground border-b">{hunk.hunkHeader}</div>
20        )}
21        <div className="select-text" dangerouslySetInnerHTML={{ __html: hunk.renderedHtml }} />
22      </div>
23    );
24  }
25  
26  interface GroupedProps {
27    filePath: string;
28    hunks: DiffHunkType[];
29    gitFileUrlBase?: string | null;
30  }
31  
32  export function DiffHunkGroup({ filePath, hunks, gitFileUrlBase }: GroupedProps) {
33    return (
34      <div className="rounded-md border overflow-x-auto">
35        <div className="bg-muted/50 px-3 py-2 font-mono text-xs text-muted-foreground border-b truncate">
36          <FilePathLink filePath={filePath} gitFileUrlBase={gitFileUrlBase} />
37        </div>
38        {hunks.map((hunk, i) => (
39          <div key={i}>
40            {i > 0 && <div className="border-t border-dashed border-muted" />}
41            {hunk.hunkHeader && (
42              <div className="bg-muted/30 px-3 py-1 font-mono text-xs text-muted-foreground border-b">
43                {hunk.hunkHeader}
44              </div>
45            )}
46            <div className="select-text" dangerouslySetInnerHTML={{ __html: hunk.renderedHtml }} />
47          </div>
48        ))}
49      </div>
50    );
51  }