No Reminders Empty State Block for React

The reminder goes into the page's state: a row with its text and its day and time appears on the note behind the card, the count reads one of three and the sand in the hourglass turns solid. Nothing is saved, scheduled or sent, and nothing will ever fire: reload and the note is empty again, and Start over empties it without a reload. To wire it for real, hand the text and the time to your scheduler where the code says so and list what comes back.

From a typed "now": Friday 9 October 2026 at 08:40, never the clock. In 1 hour is that day at 09:40, Tomorrow morning is Saturday 10 October at 09:00 and Next Monday is Monday 12 October at 09:00, all worked out with UTC date arithmetic. In your app, compute the presets from the visitor's own time after mount.

On load the card is drawn in place on the stage so the page does not trap or move focus. The Remind me button opens the real, non-modal Popover (Escape closes it and focus goes back to the button) and the in-place copy stays closed until a reload. Both share one form and the page's state, so what you typed in place is there in the real card. In your app keep the Popover and delete the in-place copy.

Tab reaches the field, the three presets (a radio group, so the arrow keys move between them) and Set reminder. Each preset is named with its words and its date. Set reminder with an empty field says so and puts focus back in the field. The note behind the card is drawn and hidden from assistive technology; the polite status line says what was set ("Reminder set for Sat 10 Oct, 09:00 in this demo. Nothing will fire.").

The note behind the card has three slots and the demo keeps three, so the empty note and the full one are the same height. A fourth press says so ("The demo keeps three. Start over.") and Start over empties the note. With your own data, let the list grow.

The card docks to the foot of the stage and scrolls inside itself, with the field at the top so you can type at once; the description folds away. The real popover keeps the catalog's phone layout.