No Reactions Empty State Block for React

Your reactions stay in the page's state and only yours are counted, so nobody else can react here; a reload empties them and Start over empties them without one. To wire it for real, send the reaction to your API where the code says so, and render the counts the response gives back instead of 0 or 1. The one real effect is the copy: the typed link is written to the clipboard.

Each reaction is a button that says whether it is pressed. Pressing it adds yours and its count goes to 1, and the status line says how many reactions there are, such as "2 reactions, all from you". Pressing it again takes it back and the count returns to 0. You can press several; the pill on the drawn post turns solid while at least one is pressed.

In a tooltip on hover and on focus, and in each button's accessible name together with its count, such as "Love, 1". The count shown on the button is hidden from assistive technology so it is not read twice.

It writes the typed link, cheerlark.example/p/autumn-walk, to the clipboard, swaps its icon for a check for three seconds and says "Link copied" in the status line. If the clipboard refuses, because the page is not served over HTTPS or permission is denied, the status line says "Couldn't copy the link" instead. Nothing is shared with anyone.

Tab reaches the six reactions one by one, then Copy link to share and Start over, which stays quiet and says so if pressed until there is a reaction. The drawing is hidden from assistive technology, and one polite status line says what changed without moving focus.

The reaction bar wraps to two rows of three so every button keeps its size, the link and the Copy button stack under it, and nothing scrolls sideways, even at 320 px wide.