Subbar

Page-level context strip used at the top of /sessions/[id] and /results — back link, page title, and secondary actions sitting on a surface-1 card.

Preview

← Back to /sessionsTwitter — Coaching session · Apr 24

Source

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

export default function SubbarRecipe() {
  return (
    <div className="border-stroke bg-surface flex items-center justify-between gap-4 rounded-xl border px-4 py-2.5">
      <div className="flex items-center gap-3">
        <a
          href="#subbar"
          className="text-label font-mono font-semibold no-underline"
          style={{ color: 'var(--color-brand-soft)' }}
        >
          ← Back to /sessions
        </a>
        <span className="text-ink-2 text-sm font-medium">
          Twitter — Coaching session · Apr 24
        </span>
      </div>
      <div className="text-ink-2 flex items-center gap-3 text-sm">
        <button type="button" className="hover:text-ink-1">
          Share
        </button>
        <span className="text-ink-3">|</span>
        <button type="button" className="hover:text-ink-1">
          Print
        </button>
      </div>
    </div>
  );
}

export default function SubbarRecipe() {
  return (
    <div className="border-stroke bg-surface flex items-center justify-between gap-4 rounded-xl border px-4 py-2.5">
      <div className="flex items-center gap-3">
        <a
          href="#subbar"
          className="text-label font-mono font-semibold no-underline"
          style={{ color: 'var(--color-brand-soft)' }}
        >
          ← Back to /sessions
        </a>
        <span className="text-ink-2 text-sm font-medium">
          Twitter — Coaching session · Apr 24
        </span>
      </div>
      <div className="text-ink-2 flex items-center gap-3 text-sm">
        <button type="button" className="hover:text-ink-1">
          Share
        </button>
        <span className="text-ink-3">|</span>
        <button type="button" className="hover:text-ink-1">
          Print
        </button>
      </div>
    </div>
  );
}