Showcase File Explorer Hero Block for React

Edit the collection at the top of the file. Each node has an id and a name; a folder also has children. Give each node its path as its id (src/components/Button.tsx): the title bar shows the open file's path from it, and the file icons are matched on its extension. List every folder you want open on load in FOLDERS, set the file open on load in OPEN_FILE, and update the counts in the status bar if you add or remove files.

Yes. The arrow keys move through it (right opens a folder, left closes it or goes up to its parent), Enter or a click picks a file, and typing a letter jumps to the next name that starts with it. The title bar's path and the editor's tab follow the file you pick. Tab enters the tree on the open file and leaves it in one step, so the tree is a single stop in the tab order.

The tree takes a map of icons by extension, made with createFileIcons (.tsx, .ts, .json, .md), and picks one for each file from its name; folders show an open or closed folder. All of them are in the muted foreground tone, so the Shine Button stays the only colour on the page. Add an extension to the map to give it its own icon.

The window is a figure named "Code editor with a file explorer", holding a tree named after the workspace (my-app). Each folder is announced as expanded or collapsed with its level, and the open file as selected. The title bar and the editor pane are decoration: hidden from screen readers and out of the tab order. The status bar is read as plain text.

The text stays centred and the Shine Button on the first screen. Below sm the editor pane steps aside and the tree takes the whole width of the window, so every file stays readable. The path in the title bar shortens with an ellipsis, and each level of the tree indents by a small step, so the deepest file still fits at 320 px.

The copy fades and rises in on load, and the window fades and settles in just after it. Folders slide open and shut, and their chevrons turn. It's all CSS, with no animation library. With reduced motion on, everything appears in place and folders open and close at once.