No Posts Empty State Block for React

The posts stay in the page's state and nothing is published or saved: the status line says so, a reload empties the feed and Start over empties it without one. To wire it for real, send the text to your API where the code says so, put the post from the response at the top of the feed, and let your server decide who sees it.

The card under Your feed shows what you type as you type it, cut to three lines, with your initials and a Draft preview badge; with an empty field it says where your words will show up. It reads the same state as the field, so it can never differ from what Post will list.

A post can be up to 280 characters; within 20 of the limit the line under the field says how many are to go. With an empty field the button stays quiet and pressing it says "Write something first" and keeps focus in the field. The demo feed holds two posts, so the feed always shows two places and the page never changes height; at two the field says so and Start over clears them.

Tab reaches the field, Post and Start over, and after a post focus goes back to the field so you can write another. The preview is a named article, the feed is a named list of the real posts, the dashed places and the drawing are hidden from assistive technology, and one polite status line says what changed. Your text is shown with automatic direction, so a post in Arabic or Hebrew reads right.

The feed stacks under the field and Post stays pinned at the foot of the screen while the form is in view, so it is on the first screen. Nothing scrolls sideways, even at 320 px wide.