Command with Separators for React

Command has h-auto w-full max-w-lg rounded-lg border shadow-md: it sits in the page flow, up to a max width, with a border and a shadow. The list is always open and there is no trigger.

A CommandSeparator goes before every group but the first, so the lines fall after Recent and after Folders. Each group keeps its own heading: Recent, Folders and Media.

Every CommandItem starts with a decorative icon, then a span for the name: Document.pdf, Photo.jpg, Projects, Documents, Video.mp4 and Song.mp3. The icons are File, Image, Folder (twice), Video and Music.

CommandEmpty in the list says "No files found." It shows only when the search leaves nothing.

These items don't run anything yet. Pass onSelect to each CommandItem.

The arrow keys move through the items, Enter runs the highlighted one, and typing filters the list. CommandInput shows "Search files..." until someone types. Command filters and ranks the items by their text on its own.