Command Palette Footer Block for React

Edit GROUPS and LEGAL at the top of the file: each link has a label and a value that is unique in the footer. The palette's entries are built from the same arrays, so the footer and the palette never disagree, and the groups are listed in order with Legal last. Give each link its real href where the file has href="#".

It closes the palette and moves keyboard focus to that link in the footer, with the theme's focus ring, so you can press Enter to follow it. The links are # placeholders; to navigate straight away, call your router's push in the selection handler instead and let the dialog close.

While the block is mounted, a keydown listener opens the palette on Command K or Control K and stops the browser's own handling. The hint reads "Ctrl K" in the markup and switches to "⌘ K" once the page knows it's a Mac, so server rendering and hydration agree. On a phone the hint is hidden and the button is full width.

The button is named "Search or jump to…" and announces its shortcut. The palette is a dialog with a labelled field and a list you move through with the Up and Down arrows; Enter jumps and Escape closes, returning focus to the button. Groups are labelled, and when nothing matches the palette says "No links match".

By the link's label and group, anywhere in them, ignoring case; typing "legal" lists the Legal group.

Groups with no match disappear.

Everything is centred and stacked: the button spans the width, the groups wrap two or three to a row, and the legal row stacks. The palette opens as a sheet from the bottom of the screen.