Score heatmap

Inline attempt-history glyph on /sessions cards. Each dot is one prior attempt colored by score tier (below / approaching / passing), trailed by an attempt-count label.

Preview

5 attempts

Source

apps/docs/app/recipes/heatmap/recipe.tsx

export default function HeatmapRecipe() {
  return (
    <div className="border-stroke bg-surface-2 flex flex-wrap items-center gap-3 rounded-2xl border p-5">
      <div className="inline-flex items-center gap-1">
        <span className="block h-2 w-2 rounded-full bg-[var(--color-score-below)]" />
        <span className="block h-2 w-2 rounded-full bg-[var(--color-score-below)]" />
        <span className="block h-2 w-2 rounded-full bg-[var(--color-score-approaching)]" />
        <span className="block h-2 w-2 rounded-full bg-[var(--color-score-passing)]" />
        <span className="block h-2 w-2 rounded-full bg-[var(--color-score-passing)]" />
        <span className="text-ink-3 tracking-label ml-1.5 font-mono text-3xs font-bold uppercase">
          5 attempts
        </span>
      </div>
    </div>
  );
}

export default function HeatmapRecipe() {
  return (
    <div className="border-stroke bg-surface-2 flex flex-wrap items-center gap-3 rounded-2xl border p-5">
      <div className="inline-flex items-center gap-1">
        <span className="block h-2 w-2 rounded-full bg-[var(--color-score-below)]" />
        <span className="block h-2 w-2 rounded-full bg-[var(--color-score-below)]" />
        <span className="block h-2 w-2 rounded-full bg-[var(--color-score-approaching)]" />
        <span className="block h-2 w-2 rounded-full bg-[var(--color-score-passing)]" />
        <span className="block h-2 w-2 rounded-full bg-[var(--color-score-passing)]" />
        <span className="text-ink-3 tracking-label ml-1.5 font-mono text-3xs font-bold uppercase">
          5 attempts
        </span>
      </div>
    </div>
  );
}