Diff View

import { DiffView } from "@/components/ui/diff-view";

export default function Example() {
  return <DiffView />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const DiffView = forwardRef(({ className, original = "", modified = "", ...props }, ref) => {
  const origLines = original.split("\n");
  const modLines = modified.split("\n");
  const maxLen = Math.max(origLines.length, modLines.length);

  return (
    <div ref={ref} className={cn("overflow-auto rounded-md border font-mono text-sm", className)} {...props}>
      <div className="grid grid-cols-2 divide-x">
        <div className="min-w-0">
          <div className="border-b bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 dark:bg-red-950 dark:text-red-400">Original</div>
          {origLines.map((line, i) => (
            <div key={i} className={cn("flex", i < modLines.length && line !== modLines[i] ? "bg-red-50 dark:bg-red-950/50" : "")}>
              <span className="w-10 shrink-0 select-none px-2 py-0.5 text-right text-xs text-muted-foreground">{i + 1}</span>
              <span className="py-0.5 pr-4">{line}</span>
            </div>
          ))}
        </div>
        <div className="min-w-0">
          <div className="border-b bg-green-50 px-3 py-1.5 text-xs font-medium text-green-700 dark:bg-green-950 dark:text-green-400">Modified</div>
          {modLines.map((line, i) => (
            <div key={i} className={cn("flex", i < origLines.length && line !== origLines[i] ? "bg-green-50 dark:bg-green-950/50" : "", i >= origLines.length ? "bg-green-50 dark:bg-green-950/50" : "")}>
              <span className="w-10 shrink-0 select-none px-2 py-0.5 text-right text-xs text-muted-foreground">{i + 1}</span>
              <span className="py-0.5 pr-4">{line}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
});
DiffView.displayName = "DiffView";

export { DiffView };