NavTabs

tcmts.share.NavTabs · #56ozgp6t · term · runs anywhere

A row of tabs that are links (the project's, a contribution's, a list's states): React Aria's Tabs, with the page's own selected (none, on a page of none of them). Arrow keys move between them; Enter or a click goes. (Its tabs are elements, not a function of the list: it renders on the server too, and a function can't go to the browser.) vertical, they're a column: a sidebar's.

import { Tab, TabList, Tabs } from "react-aria-components";

export function NavTabs({
  label,
  selected,
  tabs,
  vertical,
}: {
  label: string;
  selected: string;
  tabs: { id: string; label: string; href: string; count?: number }[];
  vertical?: boolean;
}) {
  return (
    <Tabs
      selectedKey={selected || "none"}
      keyboardActivation="manual"
      orientation={vertical ? "vertical" : "horizontal"}
      className="navtabs"
    >
      <TabList aria-label={label} className="tabs">
        {tabs.map((t) => (
          <Tab key={t.id} id={t.id} href={t.href} className="tab">
            {t.label}
            {t.count !== undefined ? <span className="count">{t.count}</span> : null}
          </Tab>
        ))}
      </TabList>
    </Tabs>
  );
}

used by