Code block

'use client';

import * as React from 'react';
import { type ApplyStatus, CodeBlock } from './code-block';

const INVOICE = `export function formatInvoice(total: number) {
  const tax = total * 0.11;
  // round to two decimals
  return \`Total: \${(total + tax).toFixed(2)}\`;
}`;

const REPORT = `import csv
from pathlib import Path

SOURCE = Path("orders.csv")
REPORT = Path("report.txt")

def read_orders(path):
    with path.open() as file:
        return list(csv.DictReader(file))

def total_by_city(orders):
    totals = {}
    for order in orders:
        city = order["city"]
        amount = float(order["amount"])
        totals[city] = totals.get(city, 0) + amount
    return totals


def top_cities(totals, count=5):
    pairs = sorted(totals.items(), key=lambda p: p[1], reverse=True)
    return pairs[:count]


def write_report(rows, path):
    lines = ["City, Total"]
    for city, total in rows:
        lines.append(f"{city}, {total:.2f}")
    lines.append("")
    path.write_text("\\n".join(lines))


def main():
    orders = read_orders(SOURCE)
    totals = total_by_city(orders)
    write_report(top_cities(totals), REPORT)
    print("Report written")


# Run the report when the file is started.
if __name__ == "__main__":
    main()`;

const CHUNK = 5;
const TICK = 35;

export default function CodeBlockDemo({ replay = 0 }: { replay?: number }) {
  const [shown, setShown] = React.useState(INVOICE.length);
  const [apply, setApply] = React.useState<ApplyStatus>('idle');
  const timer = React.useRef(0);

  // Replay streams the first block in again, and mounts the second one again so that it starts folded.
  React.useEffect(() => {
    if (replay === 0) return;
    setApply('idle');
    setShown(0);
    timer.current = window.setInterval(() => {
      setShown((n) => {
        if (n + CHUNK >= INVOICE.length) {
          window.clearInterval(timer.current);
          return INVOICE.length;
        }
        return n + CHUNK;
      });
    }, TICK);
    return () => window.clearInterval(timer.current);
  }, [replay]);

  const streaming = shown < INVOICE.length;
  return (
    <div className="flex w-full max-w-[560px] flex-col gap-6">
      <CodeBlock
        code={INVOICE.slice(0, shown)}
        language="ts"
        filename="invoice.ts"
        streaming={streaming}
        applyStatus={apply}
        onApply={() => {
          setApply('loading');
          window.setTimeout(() => setApply('success'), 1100);
        }}
      />
      <CodeBlock key={replay} code={REPORT} language="python" filename="report.py" />
    </div>
  );
}