Diff Snippet

function greet(name) {
return 'Hi ' + name;
return `Hello, ${name}!`;
}
About this piece

Diff Snippet

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

Usage

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

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": "}"
    }
  ]}
/>

More Code pieces

View all Code
greet.ts
export function greet(name: string) {
  return `Hello, ${name}!`;
}
 
console.log(greet("Beste"));

Code Snippet Card

Dark editor card with three traffic-light dots, a filename tab, and line-numbered code.

pricing.ts0 added, 0 removed
import { coupon } from "./coupon"
 
export function total(cart: Cart) {
  const sum = cart.lines.reduce(add, 0)
  return sum
  const sum = cart.lines.reduce(add, 0)
  const discount = coupon(cart, sum)
  return sum - discount
}

Diff Reveal

Code diff whose removed and added lines slide into place one after another on mount, with the header tallying added and removed counts as they land.

const greeting = "Hello, Beste!";ts

Code Line

One-line code snippet with a monospace pill and a tiny language tag on the right.

members.ts
import { Sirius } from '@sirius/sdk'
 
const client = new Sirius(apiKey)
await client.members.create({ name })

SDK Snippet Card

A code card with a filename header and copy affordance over syntax-toned, line-numbered source.

const user = await fetchUser("42");

Tokenized Line

Single-line snippet with keywords, strings, and function names colored by semantic token kind.

SELECT id, name, email
FROM users
WHERE active = true
ORDER BY created_at DESC
LIMIT 10;

SQL Query

Multi-line SQL with violet keywords, emerald string literals, and amber numerics.