Context Cards

1"use client";
2
3import { useEffect, useState } from "react";
4
5/* ─────────────────────────────────────────────────────────
6 * CONTEXT CARDS
7 * Retrieved chunks enter once, then remain available.
8 * ───────────────────────────────────────────────────────── */
9
10const CHUNKS = [
11  {
12    title: "Vendor onboarding rule",
13    chars: "290 characters",
14    body: "Cold-chain certification must be verified before a new dairy can be added to the reorder workflow.",
15    source: "Dairy Onboarding SOP.pdf",
16    badge: "PDF",
17    tone: "bg-red",
18  },
19  {
20    title: "Seasonal demand row",
21    chars: "1,250 characters",
22    body: "Q4 velocity table: pistachio +18%, vanilla +6%, rocky road -11%; retire flavors below 40 scoops weekly.",
23    source: "Sales Velocity Export.csv",
24    badge: "CSV",
25    tone: "bg-green",
26  },
27];
28
29export default function ContextCards() {
30  const [chipsShown, setChipsShown] = useState(false);
31
32  useEffect(() => {
33    const chips = setTimeout(() => setChipsShown(true), 700);
34    return () => clearTimeout(chips);
35  }, []);
36
37  return (
38    <div className="flex w-full max-w-95 flex-col gap-2">
39      <div
40        className="flex items-center gap-2 px-0.5"
41        style={{ animation: "fade-in 400ms ease-out both" }}
42      >
43        <span className="text-[13px] font-semibold text-ink">All chunks</span>
44        <span className="inline-flex h-5 items-center rounded-md bg-inset px-1.5 text-[11.5px] font-medium text-ink-2 shadow-hairline tabular-nums">
45          32
46        </span>
47      </div>
48
49      {CHUNKS.map((chunk, i) => (
50        <div
51          key={chunk.title}
52          className="overflow-hidden rounded-card bg-surface shadow-card"
53          style={{
54            animation: `fade-up 400ms cubic-bezier(0.23,1,0.32,1) ${i * 100}ms both`,
55          }}
56        >
57          <div className="primitive-card-bar flex items-center gap-2.5 border-b border-line">
58            <span className="flex min-w-0 items-center gap-1.5 text-[13px] font-medium text-ink">
59              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M4 6h16M4 12h16M4 18h10" /></svg>
60              <span className="truncate">{chunk.title}</span>
61            </span>
62            <span className="ml-auto shrink-0 text-[12px] text-ink-3 tabular-nums">{chunk.chars}</span>
63          </div>
64          <p className="px-3 pt-2 pb-1 text-[12.5px] leading-relaxed text-ink-2">
65            {chunk.body}
66          </p>
67          <div className="px-3 pb-3">
68            <span
69              className="inline-flex h-6 items-center gap-1.5 rounded-full bg-inset px-2
70                text-[12px] font-medium text-ink-2 shadow-btn
71                transition-[opacity,transform,background-color] duration-300 hover:bg-hover"
72              style={{
73                opacity: chipsShown ? 1 : 0,
74                transform: chipsShown ? "scale(1)" : "scale(0.95)",
75                transitionTimingFunction: "cubic-bezier(0.23, 1, 0.32, 1)",
76                transitionDelay: `${i * 80}ms`,
77              }}
78            >
79              <span className={`flex size-3.5 items-center justify-center rounded-[4px] ${chunk.tone} text-[7px] font-bold text-white`}>
80                {chunk.badge}
81              </span>
82              {chunk.source}
83              <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17L17 7M7 7h10v10" /></svg>
84            </span>
85          </div>
86        </div>
87      ))}
88    </div>
89  );
90}
91