No Feedback Empty State Block for React

The answers stay in the page's state: they only move the bars, the status line says nothing was sent, a reload empties them and Start over empties them without one. The demo keeps five answers. To wire it for real, send the face and the note to your API where the code says so, and draw the bars from the totals your server returns.

Shown open in place for the preview, so the block shows its content without a click: on load the card is drawn as a plain non-modal element under the Feedback button on the stage. Pressing the button opens the real Popover, with Escape to close it and focus back on the button, and the in-place copy stays closed until a reload. In your app keep only the Popover and its trigger.

Each face is a small drawing in the foreground color, a circle, two eyes and a mouth that goes from a deep frown to a wide smile, so there are no emoji whose look changes from one system to the next. Each is a native radio button named by its word, so the arrow keys move between them, Space or the pointer picks one, and a screen reader hears "Great, radio button" and how many answers it has so far.

It holds the place from the start so the card never changes height: until a face is chosen it is disabled and says "Choose a face first". Choosing a face enables it and words the label for that face, "What went wrong?" for Awful and "What worked well?" for Great. The note is optional and up to 240 characters.

Without a face it says "Pick a face first" and moves focus to the faces. With one it counts the answer, clears the form and shows "Thanks. Kept in this demo." in the line under the faces; the chosen face's bar grows by one and its count changes. At five answers the line says the demo is full and Start over clears them.

The in-place card docks to the foot of the stage so Send feedback is on the first screen and the faces keep five across. The real popover keeps the catalog's own phone layout, a card under the button that never runs past the edge of the screen, and nothing scrolls sideways, even at 320 px wide.