Diff Reveal

pricing.ts
export function total(cart: Cart) {
  const sum = cart.lines.reduce(add, 0)
  return sum
  const discount = coupon(cart, sum)
  return sum - discount
}
About this piece

Diff Reveal

Code diff under a filename header whose removed and added lines slide into place one after another on mount.

Usage

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

import { Code14 } from "@/components/beste/piece/code14";

<Code14
  filename="pricing.ts"
  lines={[
    {
      "text": "export function total(cart: Cart) {"
    },
    {
      "text": "  const sum = cart.lines.reduce(add, 0)"
    },
    {
      "text": "  return sum",
      "kind": "removed"
    },
    {
      "text": "  const discount = coupon(cart, sum)",
      "kind": "added"
    },
    {
      "text": "  return sum - discount",
      "kind": "added"
    },
    {
      "text": "}"
    }
  ]}
  bordered={false}
/>

More Code pieces

View all Code
function greet(name) {
return 'Hi ' + name;
return `Hello, ${name}!`;
}
TypeError: Cannot read 'name' of undefined
greet(src/utils.ts:14:12)
handler(src/server.ts:42:8)
processRequest(src/api.ts:88:4)
import{useState, useEffect}from"react";
import{Button}from"@/ui/button";
import{cn}from"@/lib/utils";
const greeting = "Hello, Beste!";ts
members.ts
import { Sirius } from '@sirius/sdk'
 
const client = new Sirius(apiKey)
await client.members.create({ name })
# Database
DATABASE_URL=postgres://localhost/beste
REDIS_URL=redis://localhost:6379
PORT=3000