Meetups Team Block for React

Edit GROUPS at the top of the file. A group has an organiser, a name, a member count, a rhythm (meets), the next topic and held: twelve characters, January first, with x for a month the group met and . for a month it didn't. The cadence badge is worked out from the number of xs, and the strip, its screen-reader text and the labels all come from the same twelve characters.

The strip is a list of twelve months and each month's item carries text ("March, meetup held" or "March, no meetup"); the filled and hollow cells are hidden from assistive technology, so a screen reader hears the facts, not the drawing. A hollow cell is an outline and a filled one is solid, so the strip reads without colour.

It changes the page and nothing else: the toggle is pressed, its bell becomes a check and a polite status line says how many reminders you set. Nothing is sent and a reload clears it. To make it real, call your own endpoint in the toggle's change handler. The toggle takes pressed and onPressedChange.

A date would be true once. "Second Thursday" is a rhythm that stays true, and the block never reads the clock. If you do want a date, add it to the group and format it where you render the row.

Each row stacks: the organiser and the cadence badge, the twelve-cell strip (still twelve cells at 320 pixels), then the next topic, the member count and the toggle. Nothing scrolls sideways.

Yes, with one exception on purpose: the strip is drawn left to right in a dir="ltr" box because January to December is a time series. The member counts are wrapped in bdi.