Marketplace Search Navbar Block for React

Edit ADDONS at the top of the file: a name, a category, an icon, a score out of five, an install count and a value. Picking a row puts its name in the field, as an autocomplete does. To open the listing, pass onValueChange to Autocomplete: it receives the picked value, which you can map to a route. To search a real catalogue, replace matching(query) with your own results, fetched or local; the popup renders whatever the collection holds. The categories live in CATEGORIES, with the counts typed in; derive them from your data if you have it.

Five stars are drawn in the text colour, each filled to the score by a clipped copy, so 4.6 shows four whole stars and a fifth filled by three fifths, from the inline start in either direction. The drawing is hidden from assistive technology; the row says "Rated 4.6 out of 5" in text, and the installs come from Format Number in its compact notation, in a bdi so the figure reads right in a right-to-left page. The stars use no warning colour, so the bar's only accent stays the one action on the page.

Categories is a button that says whether its panel is open. Enter or Space opens it, Escape closes it and puts focus back on Categories, and choosing a category closes it so a client-side route change doesn't leave it open. Focus stays on Categories when the menu opens; Tab moves into the panel, and the arrow keys move along the bar and between the categories. The menu also opens on hover.

The field is a combobox with an accessible name and the popup is a listbox of options. The arrow keys move through the rows, Enter picks one and Escape closes the popup, leaving focus in the field. The field declares the "/" key with aria-keyshortcuts, and the key cap is hidden from screen readers because it's a hint, not a control. The search sits in a search landmark, the menu links in a nav named Main, and the account is a link named after its owner. The popup behaves the same on every library, because it is built on the same combobox everywhere. When nothing matches the popup says what had no result.

Below the md breakpoint the bar shows the wordmark, a search button and a menu button. The search button says whether the search is open and which landmark it controls; pressing it (or "/") replaces the bar with the field, which takes the keyboard, and turns the button into a close button in the same place. Escape closes the popup first and ends the search second, and focus returns to the search button. The menu button opens a sheet from the top whose header lines up with the bar, with the six categories and their counts, For developers and the account; choosing a link closes it and Escape returns focus to the menu button. Nothing wraps at 320 pixels, and the popup is never wider than the screen.

Every link points at #: point them at your pages. The categories, For developers and the account are plain links, so they can be your router's links. Each category takes closeOnClick.