36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
import InsetPanel from "./InsetPanel";
|
|
|
|
interface DiffViewerProps {
|
|
diff: string;
|
|
className?: string;
|
|
}
|
|
|
|
export default function DiffViewer({ diff, className }: DiffViewerProps) {
|
|
if (!diff) return null;
|
|
|
|
return (
|
|
<InsetPanel
|
|
tone="code"
|
|
padding="sm"
|
|
className={`mt-2 max-h-96 overflow-auto font-mono text-xs leading-5 ${className ?? ""}`.trim()}
|
|
>
|
|
{diff.split("\n").map((line, index) => {
|
|
let lineClassName = "app-text-faint px-3";
|
|
if (line.startsWith("+") && !line.startsWith("+++")) {
|
|
lineClassName = "app-code-line-added px-3";
|
|
} else if (line.startsWith("-") && !line.startsWith("---")) {
|
|
lineClassName = "app-code-line-removed px-3";
|
|
} else if (line.startsWith("@@")) {
|
|
lineClassName = "app-code-line-meta px-3";
|
|
}
|
|
|
|
return (
|
|
<div key={`${index}-${line}`} className={lineClassName}>
|
|
<span className="select-all whitespace-pre">{line}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</InsetPanel>
|
|
);
|
|
}
|