Results score card

Hero panel on /results — tabular 72px overall score, readiness verdict, delta vs last attempt, and a thin progress bar with the score-approaching → score-passing gradient.

Preview

Overall score3.4overall

Approaching readiness+0.4 since last attempt0.1 below 3.5 readiness target

Source

apps/docs/app/recipes/score-card-results/recipe.tsx

export default function ScoreCardResultsRecipe() {
  return (
    <div
      className="flex flex-col gap-6 rounded-2xl border p-7 sm:flex-row sm:items-end sm:justify-between"
      style={{
        background: 'var(--bg-surface-2)',
        borderColor: 'var(--color-border-2)',
      }}
    >
      <div className="flex flex-col gap-1">
        <span className="text-ink-3 tracking-label text-2xs font-mono font-bold uppercase">
          Overall score
        </span>
        <span
          className="text-ink-1 text-[72px] leading-none font-bold tabular-nums"
          style={{ letterSpacing: '-0.04em' }}
        >
          3.4
        </span>
        <span className="text-ink-3 text-xs">overall</span>
      </div>
      <div className="flex flex-1 flex-col gap-2 sm:max-w-sm">
        <span
          className="text-sm font-semibold"
          style={{ color: 'var(--color-score-approaching-text)' }}
        >
          Approaching readiness
        </span>
        <span className="text-xs font-medium" style={{ color: 'var(--color-success-text)' }}>
          +0.4 since last attempt
        </span>
        <span className="text-ink-2 text-xs">0.1 below 3.5 readiness target</span>
        <div className="bg-stroke mt-1 h-1.5 w-full overflow-hidden rounded-full">
          <div
            className="h-full rounded-full"
            style={{
              width: `${(3.4 / 5) * 100}%`,
              background:
                'linear-gradient(90deg, var(--color-score-approaching), var(--color-score-passing))',
            }}
          />
        </div>
      </div>
    </div>
  );
}

export default function ScoreCardResultsRecipe() {
  return (
    <div
      className="flex flex-col gap-6 rounded-2xl border p-7 sm:flex-row sm:items-end sm:justify-between"
      style={{
        background: 'var(--bg-surface-2)',
        borderColor: 'var(--color-border-2)',
      }}
    >
      <div className="flex flex-col gap-1">
        <span className="text-ink-3 tracking-label text-2xs font-mono font-bold uppercase">
          Overall score
        </span>
        <span
          className="text-ink-1 text-[72px] leading-none font-bold tabular-nums"
          style={{ letterSpacing: '-0.04em' }}
        >
          3.4
        </span>
        <span className="text-ink-3 text-xs">overall</span>
      </div>
      <div className="flex flex-1 flex-col gap-2 sm:max-w-sm">
        <span
          className="text-sm font-semibold"
          style={{ color: 'var(--color-score-approaching-text)' }}
        >
          Approaching readiness
        </span>
        <span className="text-xs font-medium" style={{ color: 'var(--color-success-text)' }}>
          +0.4 since last attempt
        </span>
        <span className="text-ink-2 text-xs">0.1 below 3.5 readiness target</span>
        <div className="bg-stroke mt-1 h-1.5 w-full overflow-hidden rounded-full">
          <div
            className="h-full rounded-full"
            style={{
              width: `${(3.4 / 5) * 100}%`,
              background:
                'linear-gradient(90deg, var(--color-score-approaching), var(--color-score-passing))',
            }}
          />
        </div>
      </div>
    </div>
  );
}