Tabs Underline Navbar Block for React

Edit TABS at the top of the file: each entry is an id, a label and an href, and useState("revenue") sets the first current tab. The demo's links point at # and choosing one calls preventDefault; with a real router, delete the onClick handler and compute active from the current path.

The stroke is placed one pixel below the bar's bottom edge and given z-10, so it paints over the hairline that the next block draws as its top rule instead of next to it: the tab and the page rule meet. On a phone the row scrolls, which clips anything outside it, so the stroke sits just inside the bar's bottom edge instead. If you stack something under the bar that draws its own top border, the stroke covers it only under the current tab.

The tabs are links in a nav landmark named Main. Only one is in the tab order at a time (a roving tab stop): Tab goes from the wordmark to the current tab and then to Export. Left and Right move focus between tabs (swapped in right-to-left pages), wrapping at the ends, and Home and End jump to the first and last; focus moves but nothing is chosen until Enter, so a screen reader user can browse the tabs without navigating. The current tab is announced as the current page. The mark is decorative and hidden.

Below the sm breakpoint the wordmark is just its icon and Export is a download icon (its text stays in the accessible name), leaving the bar to the tabs. The tab row scrolls sideways inside the bar with a soft fade at each edge, and the current tab is scrolled to the middle when the page loads and when you choose another; the scrollbar is hidden. From md the row doesn't scroll. Export renders the link it's given with render, with nativeButton={false}.

With reduced motion the stroke jumps to the chosen tab at once and the row scrolls instantly instead of smoothly. The band of light on Export fades in where it stands instead of sweeping.

The navbar is the page's first block: its + marks and rails line up with every block under it, and it draws no bottom border. To keep it in view while the page scrolls, add sticky top-0 z-40 bg-background/80 backdrop-blur to the header; give it an opaque bg-background if you want the stroke to stay legible over content.