Code Block

1"use client";
2
3import { useCallback, useEffect, useState } from "react";
4
5/* ─────────────────────────────────────────────────────────
6 * CODE BLOCK
7 * Agent-written code streams line by line; copy is live.
8 * ───────────────────────────────────────────────────────── */
9
10const LINE_MS = 240;
11const HOLD_MS = 3200;
12
13type Tok = { t: string; c?: "kw" | "str" | "num" | "fn" | "dim" };
14
15const LINES: Tok[][] = [
16  [{ t: "export async function ", c: "kw" }, { t: "churnBatch", c: "fn" }, { t: "() {", c: "dim" }],
17  [{ t: "  const ", c: "kw" }, { t: "flavor = " }, { t: "await ", c: "kw" }, { t: "getFlavor", c: "fn" }, { t: "(", c: "dim" }, { t: "\"pistachio\"", c: "str" }, { t: ");", c: "dim" }],
18  [{ t: "  const ", c: "kw" }, { t: "base = " }, { t: "await ", c: "kw" }, { t: "dairy." }, { t: "fetch", c: "fn" }, { t: "({ flavor });", c: "dim" }],
19  [{ t: "  await ", c: "kw" }, { t: "freezer." }, { t: "store", c: "fn" }, { t: "(base, { temp: ", c: "dim" }, { t: "\"-14C\"", c: "str" }, { t: " });", c: "dim" }],
20  [{ t: "  return ", c: "kw" }, { t: "base.gallons;" }],
21  [{ t: "}", c: "dim" }],
22];
23
24const COLORS: Record<string, string> = {
25  kw: "var(--accent-ink)",
26  str: "var(--green)",
27  num: "var(--orange)",
28  fn: "var(--ink)",
29  dim: "var(--ink-3)",
30};
31
32const RAW = `export async function churnBatch() {
33  const flavor = await getFlavor("pistachio");
34  const base = await dairy.fetch({ flavor });
35  await freezer.store(base, { temp: "-14C" });
36  return base.gallons;
37}`;
38
39export default function CodeBlock() {
40  const [count, setCount] = useState(0);
41  const [copied, setCopied] = useState(false);
42  const done = count >= LINES.length;
43
44  /* stream in once, then hold — replaying reads as noise */
45  useEffect(() => {
46    if (done) return;
47    const t = setTimeout(() => setCount((c) => c + 1), count === 0 ? 400 : LINE_MS);
48    return () => clearTimeout(t);
49  }, [count, done]);
50
51  const copy = useCallback(() => {
52    navigator.clipboard.writeText(RAW).then(() => {
53      setCopied(true);
54      setTimeout(() => setCopied(false), 1500);
55    });
56  }, []);
57
58  return (
59    <div className="w-full max-w-95 overflow-hidden rounded-card bg-surface shadow-card">
60      {/* header */}
61      <div className="primitive-card-bar flex items-center justify-between border-b border-line">
62        <span className="flex items-center gap-2">
63          <svg aria-hidden width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" className="shrink-0 text-ink-3">
64            <path d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" />
65          </svg>
66          <span className="font-mono text-[12px] font-medium text-ink">churn.ts</span>
67          <span className="text-[11.5px] text-ink-3">TypeScript</span>
68        </span>
69        <button
70          aria-label="Copy code"
71          onClick={copy}
72          className={`flex h-6 items-center gap-1 rounded-[6px] px-1.5 text-[11.5px]
73            font-medium transition-colors duration-100 hover:bg-hover
74            ${copied ? "text-green" : "text-ink-3 hover:text-ink"}`}
75        >
76          {copied ? (
77            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
78          ) : (
79            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></svg>
80          )}
81          {copied ? "Copied" : "Copy"}
82        </button>
83      </div>
84
85      {/* code */}
86      <pre className="min-h-[137px] bg-inset px-3 py-2.5 font-mono text-[11.5px] leading-[1.7]">
87        {LINES.slice(0, count).map((line, i) => (
88          <div
89            key={i}
90            className="flex"
91            style={{ animation: "fade-up 250ms cubic-bezier(0.23,1,0.32,1) both" }}
92          >
93            <span className="w-7 shrink-0 border-r border-line pr-2 text-right text-[10.5px] leading-[1.86] text-ink-3/60 select-none">
94              {i + 1}
95            </span>
96            <span className="pl-3 whitespace-pre">
97              {line.map((tok, j) => (
98                <span key={j} style={{ color: tok.c ? COLORS[tok.c] : "var(--ink-2)" }}>
99                  {tok.t}
100                </span>
101              ))}
102              {i === count - 1 && !done && (
103                <span className="ml-0.5 inline-block h-3 w-[3px] translate-y-0.5 rounded-full bg-accent" />
104              )}
105            </span>
106          </div>
107        ))}
108              </pre>
109    </div>
110  );
111}
112