No Files Empty State Block for React

The files stay in the tab: the page reads only each file's name, size and type, never its contents, so nothing is opened or uploaded, a reload empties the window and the counts follow every change. To wire it for real, upload each file where the code says so, add its row from your response, and keep Trash as a flag on the file instead of a second list.

A file manager lives inside an app, so the block is the app's own frame: the catalog Sidebar for the places, a top bar with the page's heading and its one action, and a page whose table scrolls on its own. The window keeps its height whatever you do. The rail's links change the page and its heading, and each is named with its count, such as All files, 3 files.

Recent lists the five newest files, newest first. Move to Trash on a row takes the file out of All files and Recent and into Trash, the counts change, and focus goes to the next row. In Trash, Restore puts the file back. Nothing is deleted for good in this demo, so a reload is the only way to empty it.

Tab runs through the sidebar, the top bar, the drop zone and the table, which is a focusable region of its own because it scrolls. The zone opens the file picker on Enter or Space, and the one polite status line at the foot says what changed. The drawing is hidden from assistive technology.

The sidebar becomes a sheet that the top bar's trigger opens, and a choice closes it with focus back on the trigger. The zone is shorter and drops its extra line, the table drops its Type column, and the button stays in the top bar. The window keeps its height and nothing scrolls sideways, even at 320 px wide.

No. The window is a fixed height from the medium breakpoint (46rem) and a shorter one on phones (36rem); the drop zone keeps its size when files arrive, and only the table scrolls inside its own region, so adding or moving files never moves the page around the window.