Diff View

Unified diff with tinted add and remove rows, line numbers, and +/− prefix column.

button.tsx

12 export function Button({ label }) {
13−  return <button>{label}</button>;
+  return <button className="btn">{label}</button>;
14 }

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Editor4 } from "@/components/beste/piece/editor4";

<Editor4
  filename="button.tsx"
  lines={[
    {
      "kind": "context",
      "line": 12,
      "content": "export function Button({ label }) {"
    },
    {
      "kind": "remove",
      "line": 13,
      "content": "  return <button>{label}</button>;"
    },
    {
      "kind": "add",
      "content": "  return <button className=\"btn\">{label}</button>;"
    },
    {
      "kind": "context",
      "line": 14,
      "content": "}"
    }
  ]}
/>