No Announcements Empty State Block for React

The announcements stay in the page's state, listed in the feed: nobody is sent anything and a reload empties it, while Start over empties it without one. To wire it for real, send the audience, title, details and pin to your API where the code says so, add the card from the response, and show a failure in the status line of the foot.

It is the size of the audience you picked, typed in the file next to the group's names (48, 6 and 14), so the button, the group and the card all read from the same number. Change the audience and the button follows. In your app read the count from your directory instead.

A pinned announcement stays above the rest of the feed and the card says "Pinned to the top"; the others follow, newest first. The demo's feed holds two cards, so it never changes the panel's height, and at two the button says the feed is full and Start over clears it.

Nothing is posted: the field says "Add a title to post" and takes focus. The details are optional; a card without them says "No details added". Titles are limited to 60 characters and details to 280.

The audience is a group named Who sees it, with the arrow keys between its three choices, and the button's name changes with it. The switch is named Pin to the top. The feed is a region that scrolls and takes focus, so its cards can be read with the arrow keys, and the foot's polite status line says what changed. The drawing is hidden from assistive technology.

The two cells stack, composer first, and the foot with the Post button and Start over stays pinned to the bottom of the screen so it is always in reach. The feed sits under the composer and grows as announcements are posted. Nothing scrolls sideways, even at 320 px wide.