AirShelf/components/Topbar.tsx

import Link from "next/link";
import Icon from "./Icon";

export interface Crumb {
  label: string;
  href?: string;
}

interface Props {
  /** Pass crumbs to show breadcrumbs (e.g. inner pages). Omit to show the team switcher (workspace). */
  crumbs?: Crumb[];
  balance?: string;
}

export default function Topbar({ crumbs, balance = "¥327.40" }: Props) {
  return (
    <header className="topbar">
      {crumbs && crumbs.length > 0 ? (
        <nav className="crumbs">
          {crumbs.map((c, i) => {
            const last = i === crumbs.length - 1;
            const sep = i > 0 ? <span key={`s-${i}`} className="sep">/</span> : null;
            return last ? (
              <span key={c.label}>{sep}<span className="here">{c.label}</span></span>
            ) : (
              <span key={c.label}>
                {sep}
                {c.href ? <Link href={c.href}>{c.label}</Link> : <span>{c.label}</span>}
              </span>
            );
          })}
        </nav>
      ) : (
        <div className="team-switcher" role="button">
          <div className="p">个</div>
          个人工作室
          <Icon name="chev-down" size={12} className="chev" />
        </div>
      )}

      <div className="top-r">
        <span className="balance-chip">
          <Icon name="credit-card" size={13} />
          余额 <strong>{balance}</strong>
        </span>
        <button className="icon-btn" aria-label="通知">
          <Icon name="bell" />
          <span className="dot" />
        </button>
        <button className="pill-btn">
          <Icon name="help" />
          帮助
        </button>
        <button className="pill-btn">
          <Icon name="doc" />
          文档
        </button>
        <button className="pill-btn upgrade">
          <Icon name="up" />
          升级
        </button>
      </div>
    </header>
  );
}