Components

Diff view

A compact monospace diff: add, remove, hunk and file lines in their own tones. The caller parses the diff; this only draws it.

import { … } from "@fungi.computer/caps/components/diff-view";

Patch

import { DiffView } from "@fungi.computer/caps/components/diff-view";

export default function Patch() {
  return (
    <DiffView
      className="w-full max-w-sm"
      lines={[
        { kind: "file", text: "grow-log.yaml" },
        { kind: "hunk", text: "@@ -1,3 +1,3 @@" },
        { kind: "context", text: "species: lions-mane" },
        { kind: "remove", text: "humidity: 80" },
        { kind: "add", text: "humidity: 85" },
        { kind: "context", text: "stage: fruiting" },
      ]}
    />
  );
}

Hidden lines

import { DiffView } from "@fungi.computer/caps/components/diff-view";

export default function HiddenLines() {
  return (
    <DiffView
      className="w-full max-w-sm"
      hiddenLines={42}
      lines={[
        { kind: "file", text: "spawn-run.log" },
        { kind: "add", text: "batch 17: 40 logs inoculated" },
        { kind: "remove", text: "batch 16: 2 logs contaminated" },
      ]}
    />
  );
}

Props

DiffViewProps

Prop	Type	Description
`lines`	`readonly DiffViewLine[]`
`hiddenLines?`	`number`	Lines the caller omitted, shown as a trailing note.

linesreadonly DiffViewLine[]
hiddenLines?number
Lines the caller omitted, shown as a trailing note.

Full types: API reference.