Directory Blog Block for React

Edit POSTS at the top of the file: an id, a title and the reading time in minutes. The list is sorted A to Z by title, the groups are the first letters that occur, and the count in the foot is derived, so nothing else needs touching. Twenty-four posts fill the palette about one and a half times; it scrolls inside its fixed height.

It opens the highlighted post, which here means the line at the start says "Opened: …", since a block with no router has nowhere to go. Replace open (or the onSelect of each item) with your router's navigation, or turn each item into a link. Clicking an item does the same as Enter.

The field matches the typed text anywhere in a title, ignoring case and accents, and groups with no match disappear. The palette has a fixed height and scrolls inside it, so filtering never moves the block; the count in the foot is a polite status ("5 of 24 posts") and an empty result says "No posts match." The list is built with cmdk's own filtering turned off, so the block's matching (case and accents ignored) decides which items show.

The field is a combobox over a list: focus stays in the field, Up and Down move the highlight, Enter opens and Escape clears the typed text. Groups are labelled by their letter. The foot's count and the opened-post line are polite statuses. The palette does not take focus when the page loads.

The header, then the palette at full width, then the opened-post line. The key hints are hidden on a phone, where there is no keyboard; the list scrolls inside the palette and the field's keyboard opens as usual. Nothing scrolls the page sideways at 320 pixels.

Yes. The split, the palette and the list mirror, group letters keep their place, and reading times are isolated so "8 min" stays in order.