portal/src/components/portal/Topbar.tsx

import { Search } from "lucide-react";
import { ThemeToggle } from "./ThemeToggle";

export type Crumb = { label: string; href?: string };

// The single 48px topbar. Crumbs left, then a spacer, then the ⌘K button
// and the theme toggle.
export function Topbar({ crumbs }: { crumbs: Crumb[] }) {
  return (
    <header className="topbar">
      <div className="crumbs">
        {crumbs.map((c, i) => {
          const last = i === crumbs.length - 1;
          return (
            <span key={i} className="row" style={{ gap: 8 }}>
              {i > 0 ? <span className="c-sep">/</span> : null}
              {last ? (
                <span className="c-cur">{c.label}</span>
              ) : (
                <span className="c-prev">{c.label}</span>
              )}
            </span>
          );
        })}
      </div>
      <div className="topbar-spacer" />
      <button type="button" className="cmdk-btn" aria-label="Open command palette">
        <Search size={13} />
        <span>Jump…</span>
        <span className="kbd">⌘K</span>
      </button>
      <ThemeToggle />
    </header>
  );
}