No Mentions Empty State Block for React

The posted mentions stay in the page's state and each row says nobody was notified: a reload empties them and Start over empties them without one. To wire it for real, send the text and the ids of the tagged teammates to your API where the code says so, add the row from the response, and notify the people tagged on your server.

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 Mentions 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.

When the word you are typing starts with @, the five teammates whose first name starts with what follows it are listed under the field: arrow down to move into the list, or press Enter in the field for the top match, or pick one with the pointer. The tag goes into the text with a space after it and focus stays in the field. A word with no @ opens nothing, and an @ that matches nobody says so.

It needs at least one tag: without one the field says "Tag someone first: type @ and a name" and keeps focus. A tagged post is added at the top of the list with its text, the tags in bold, "Tags Mara and Idris" and the page's fixed date. The demo lists three; at three the field says so and Start over clears them.

The Mentions button is named with its count, such as Mentions, 1 post. In the card Tab reaches the field and Post, the field's note says how many teammates match, the list is named Teammates and the posted rows are a named list. The drawings are hidden from assistive technology and a polite status line says what was tagged or posted.

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