Event Reminder Notification Block for React

Edit PLANS: each has an id, a title, a place, a start as an ISO time in UTC and repeats (empty for a one-off, or the word shown in the badge). LEADS are the choices of the select, SNOOZE_STEP and MAX_SNOOZES set how far Snooze goes. Every time on the page is worked out from the start and the lead, so there is nothing else to keep in step.

A reminder comes the chosen number of minutes before the start: with 15 minutes, an event at 10:30 reminds you at 10:15. The select changes the lead for every reminder at once, the status line names the first time that results, and the times that are skipped are left out of it.

Snooze moves one reminder five minutes later, up to three times and never past the start; the row says how far it was snoozed, and the button stays in place but goes quiet when there is nowhere to go, saying why in the status line. Skip turns that reminder off and shows Restore in the same place; Restore puts it back as it was. In this demo nothing is scheduled: the choices live on this page. In your app save them with the event.

A native select opens the device's own picker, which is the best control for four fixed choices on a phone, and it needs nothing to work the same on every base. Its labels start with a number, so on an RTL page the select sits in an LTR box to keep "15 minutes before" in order.

No. Rows have a fixed height; a skipped row changes its words, not its size, and the count above the list changes in place. The status line keeps room for its longest message.

Every button names its event ("Snooze Sprint planning 5 minutes", "Skip Sprint planning"), the lead select has a visible label, and focus moves to Restore after a skip and back to Skip after a restore so a keyboard user keeps their place. Times are marked up as times.