Reference solution toggle

Closed-by-default reference solution card. The mono brand-soft toggle invites a deliberate click after the user has attempted the problem.

Preview

Reference solution

Read after attempting to keep the practice honest.· 8 sub-systems · 12 trade-offs annotated

Source

apps/docs/app/recipes/ref-toggle-card/recipe.tsx

export default function RefToggleCardRecipe() {
  return (
    <div className="bg-surface-2 border-stroke rounded-xl border px-5 py-[18px]">
      <div className="flex items-center justify-between gap-3">
        <div>
          <p className="text-ink-1 text-sm font-semibold">Reference solution</p>
          <p className="text-ink-3 mt-0.5 text-xs">
            Read after attempting to keep the practice honest.
            <span className="text-ink-3 ml-2">· 8 sub-systems · 12 trade-offs annotated</span>
          </p>
        </div>
        <button
          type="button"
          className="text-2xs cursor-pointer font-mono font-bold tracking-[0.06em] uppercase"
          style={{ color: 'var(--color-brand-soft)' }}
        >
          [Expand ↓]
        </button>
      </div>
    </div>
  );
}

export default function RefToggleCardRecipe() {
  return (
    <div className="bg-surface-2 border-stroke rounded-xl border px-5 py-[18px]">
      <div className="flex items-center justify-between gap-3">
        <div>
          <p className="text-ink-1 text-sm font-semibold">Reference solution</p>
          <p className="text-ink-3 mt-0.5 text-xs">
            Read after attempting to keep the practice honest.
            <span className="text-ink-3 ml-2">· 8 sub-systems · 12 trade-offs annotated</span>
          </p>
        </div>
        <button
          type="button"
          className="text-2xs cursor-pointer font-mono font-bold tracking-[0.06em] uppercase"
          style={{ color: 'var(--color-brand-soft)' }}
        >
          [Expand ↓]
        </button>
      </div>
    </div>
  );
}