Git Gutter

const user = { name: 'Nils' };
const msg = greet(user.name);
console.log(msg);
 
About this piece

Git Gutter

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

Usage

The import and the props worth knowing about, in one place.

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

<Editor30
  lines={[
    {
      "line": 12,
      "code": "const user = { name: 'Nils' };",
      "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"
    }
  ]}
  bordered={false}
/>

More Editor pieces

View all Editor
const users = load();
for (const user of users) {12×
  render(user);
}
const greet = (name: string) =>Hania
  `Hello, ${name}!`;Nils
 Hania
1// TODO migrate to server components
2// FIXME handles null state poorly
3// NOTE revisit once design lock lands
const value = user.prfile.name;
  • Rename to 'profile'Preferred
  • Add missing property 'prfile'
  • Disable rule for this line
1function·greet(name)·{
2→return·`Hello,·${name}!`;
3}
const name = user.prfile.name;Property 'prfile' does not exist on type 'User'.