Compare CTA

Slim description bar pointing to the reference solution diff. Sits between evaluation prose and dimension scores on /results.

Preview

Compare your answer to the reference solution.

See diff →

Source

apps/docs/app/recipes/compare-cta/recipe.tsx

export default function CompareCtaRecipe() {
  return (
    <div className="bg-surface-2 border-stroke flex items-center justify-between gap-4 rounded-xl border px-[18px] py-[14px]">
      <p className="text-ink-2 text-sm">Compare your answer to the reference solution.</p>
      <a
        href="#compare-cta"
        className="text-sm font-semibold"
        style={{ color: 'var(--color-brand-soft)' }}
      >
        See diff →
      </a>
    </div>
  );
}

export default function CompareCtaRecipe() {
  return (
    <div className="bg-surface-2 border-stroke flex items-center justify-between gap-4 rounded-xl border px-[18px] py-[14px]">
      <p className="text-ink-2 text-sm">Compare your answer to the reference solution.</p>
      <a
        href="#compare-cta"
        className="text-sm font-semibold"
        style={{ color: 'var(--color-brand-soft)' }}
      >
        See diff →
      </a>
    </div>
  );
}