90 lines · 2.5 KB
"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, i) => (
        <DiffFileRenderer key={`${fileDiff.name}-${i}`} fileDiff={fileDiff} diffStyle={diffStyle} />
      ))}
    </div>
  );
}