"use client";
import { useEffect, useRef, useState } from "react";
import { parsePatchFiles } from "@pierre/diffs";
import type { FileDiff as FileDiffRenderer, FileDiffMetadata } from "@pierre/diffs";
export type CommitDiffViewProps = {
patch: string;
};
export function CommitDiffView({ patch }: CommitDiffViewProps) {
const [diffStyle, setDiffStyle] = useState<"split" | "unified">("split");
if (!patch) {
return <p className="text-gray-500">No changes in this commit.</p>;
}
const parsed = parsePatchFiles(patch);
const files = parsed.flatMap((p) => p.files);
return (
<div className="space-y-4">
<div className="flex items-center gap-2">
<span className="text-xs text-gray-500">
{files.length} file{files.length !== 1 ? "s" : ""} changed
</span>
<button
type="button"
onClick={() => setDiffStyle((s) => (s === "split" ? "unified" : "split"))}
className="rounded border border-gray-700 px-2 py-0.5 text-xs text-gray-400 hover:border-gray-500 hover:text-gray-200"
>
{diffStyle === "split" ? "Unified" : "Split"}
</button>
</div>
{files.map((fileDiff) => (
<DiffFileRenderer
key={`${fileDiff.type}:${fileDiff.prevName ?? ""}:${fileDiff.name}`}
fileDiff={fileDiff}
diffStyle={diffStyle}
/>
))}