Diff Snippet

Compact diff card with added, removed, and context lines tinted in emerald and rose.

function greet(name) {

return 'Hi ' + name;

return `Hello, ${name}!`;

}

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

Import & use

import { Code4 } from "@/components/beste/piece/code4";

<Code4
  lines={[
    {
      "kind": "context",
      "text": "function greet(name) {"
    },
    {
      "kind": "remove",
      "text": "  return 'Hi ' + name;"
    },
    {
      "kind": "add",
      "text": "  return `Hello, ${name}!`;"
    },
    {
      "kind": "context",
      "text": "}"
    }
  ]}
/>