No Projects Empty State Block for React

The name goes into the page's state and a row appears in the table with the status Planning and the date of the page's fixed "today" (9 Oct). Nothing is saved or sent: reload and the table is empty again, and Start over empties it without a reload. To wire it for real, send the trimmed name to your API where the code says so, add the row from the response, and show a failure in the status line under the table.

The body always has four rows: the dashed one, the real projects and as many ghost rows as are left to make four in all. Every row is the same height, so adding a project swaps a ghost for a real row in place. That is also why the demo lists at most three projects; with more rows of your own, let the list grow like any list and keep the ghosts for the empty state only.

Render it when your projects array has no items and render the table otherwise: the real rows, the dashed row and the ghost rows are three separate pieces of markup, and the ghosts are decoration that you can drop as soon as the list has content. The message band is the catalog's Empty, with the heading as a real h3 inside its title.

Tab reaches the name field, Add, Create project and Start over, which stays quiet (and says so if pressed) until there is a project. Create project moves focus to the name field. The ghost rows are hidden from assistive technology and the dashed row's status and date shapes are decoration, so a screen reader hears a table of the real projects and a field named Project name. The sentence in the message band is a polite status region: it says what changed ("Added Autumn launch in this demo") without moving focus.

The Updated column folds into the name cell as a second line ("Updated 9 Oct"), so the table keeps two columns and never scrolls sideways, even at 320 px wide. The field and its Add button share the first cell. The message band and its button come after the four rows.

Nothing is added: the status line says "Type a project name first" and the field takes focus. Typing clears that message. Names are trimmed and limited to 40 characters.