Git Gutter

Code lines with colored gutter stripes showing added (emerald), modified (sky), and removed (rose) lines.

import { greet } from './greet';
 
const user = { name: 'Ayşe' };
const msg = greet(user.name);
console.log(msg);
 

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

Import & use
import { Editor30 } from "@/components/beste/piece/editor30";

<Editor30
  lines={[
    {
      "line": 10,
      "code": "import { greet } from './greet';",
      "kind": "unchanged"
    },
    {
      "line": 11,
      "code": "",
      "kind": "unchanged"
    },
    {
      "line": 12,
      "code": "const user = { name: 'Ayşe' };",
      "kind": "added"
    },
    {
      "line": 13,
      "code": "const msg = greet(user.name);",
      "kind": "modified"
    },
    {
      "line": 14,
      "code": "console.log(msg);",
      "kind": "unchanged"
    },
    {
      "line": 15,
      "code": "",
      "kind": "removed"
    }
  ]}
/>