Ranked List Leaderboard Stats Block for React

Add an entry to PERIODS and one number to the done and points arrays of every member in MEMBERS, in the same order. The tables are built from them when the module loads. Then widen the switch (grid-cols-2 becomes grid-cols-3). Name a period by what it is ("This quarter"), never by a date.

Each period has its own sorted table. The rows are keyed by their place, not by the member, so a row never moves: its name and its subtitle change, and its points roll from one number to the next. There is no reordering animation to tune and no layout shift, and with reduced motion the numbers change in place.

It is the catalog's Segment Group, a single-choice control with arrow-key movement between its segments, wired to one piece of state. The line under the frame is a polite live region that reads "This month, Idris Kamau leads by 230 points" once when the period changes; the six rows are not read out one by one. The line reserves two lines on a phone so nothing moves.

A ranking is read from the top: a bigger numeral and a quiet tint make the leader the anchor without a medal, a crown or a colour. The row is always the first place, so the highlight stays put when the period changes. The tint is the theme's muted colour at 40%, so it follows every preset, light or dark.

The table is an ordered list named for the period ("Top 6, this week"), each row reads as its rank, name, challenges done and points, and the points are digits that roll to the final number with a text copy for assistive technology. Values sit in bdi elements so right-to-left pages keep them intact. With reduced motion the digits change in place.