Buyer and Seller Tabs Footer Block for React Aria

Two tabs, Buy and Sell. The arrow keys move between them. Choosing one shows that audience's three link groups and its action, and hides the other. Both panels stay in the HTML, so both audiences' links are in the markup. Each panel sets shouldForceMount. An unselected panel is inert, and data-[inert]:hidden hides it. An extra copy of both panels sits in the same grid cell, unseen and removed from keyboard and screen-reader reach, so the footer keeps the height of the taller panel.

Edit AUDIENCES at the top of the file. Each audience has an id, a label, a tone (outline or shine), an action (the button's text) and three groups of links. LEGAL is the policy row. Every link is a plain anchor with href="#": point it at its page, or swap the anchor for your router's link. Keep the two audiences the same shape if you want the footer to stay the same height.

Only one action is on screen. Buy shows an outline Button, "Browse listings". Sell shows the Shine Button, "Start selling". The other stays in the markup, hidden with its panel. Each button takes an href and renders a link.

The block is a footer. The tabs are a tab list labelled Buy or sell. The open panel is a nav labelled Footer, each group a small h2 over a list. The closed panel is hidden, and the height-holding copy is inert, so only one Footer nav is announced. The policy links are a list named Legal. Every link and tab shows the theme's focus ring.

The wordmark and the sentence come first, then the tabs at full width, then the three groups stacked (three in a row from sm), then the action, then the legal row. Nothing scrolls sideways at 320 pixels.

It is the current year, read when the footer renders, so it never goes stale. The block is a server component with no state, so on a server-rendered site the year is the server's when the page was built or rendered.