/ 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 }