Score row with trend

import { ScoreBar } from '@hey-mike/tungsten';

const ROWS = [
  { name: 'Requirements', score: 3.9, trend: 'up' as const, delta: '+0.3' },
  { name: 'Scale Estimation', score: 2.2, trend: 'down' as const, delta: '−0.4' },
  { name: 'API Design', score: 3.1, trend: 'flat' as const, delta: '·' },
  { name: 'High-Level Design', score: 4.0, trend: 'up' as const, delta: '+0.2' },
  { name: 'Bottlenecks', score: 2.8, trend: 'down' as const, delta: '−0.1' },
];

const TREND_COLOR = {
  up: 'text-success',
  down: 'text-warning',
  flat: 'text-ink-3',
} as const;

const TREND_GLYPH = { up: '↑ ', down: '↓ ', flat: '' } as const;

export default function ScoreRowRecipe() {
  return (
    <div className="border-stroke bg-surface space-y-1 rounded-2xl border p-6">
      <header className="tracking-label text-ink-3 text-label mb-3 flex items-baseline gap-2 font-mono font-bold uppercase">
        <span>Your Scores</span>
        <span className="opacity-60">· 0–5</span>
      </header>
      {ROWS.map(({ name, score, trend, delta }) => (
        <div
          key={name}
          className="border-stroke grid grid-cols-[1fr_2fr_auto_auto] items-center gap-3.5 border-b border-dashed py-2 last:border-b-0"
        >
          <span className="text-ink-2 text-sm font-medium">{name}</span>
          <ScoreBar score={score} label={name} />
          <span
            className={`text-2xs inline-block min-w-10 text-right font-mono tabular-nums ${TREND_COLOR[trend]}`}
          >
            {TREND_GLYPH[trend]}
            {delta}
          </span>
        </div>
      ))}
    </div>
  );
}