96 lines · 2.3 KB
'use client'
import { useEffect, useRef, useState } from 'react'
import { parsePatchFiles } from '@pierre/diffs'

interface Props {
  patch: string
}

export function CommitDiffView({ patch }: Props) {
  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
          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={i} fileDiff={fileDiff} diffStyle={diffStyle} />
      ))}
    </div>
  )
}