Status Filter Team Block for React

Edit PEOPLE at the top of the file: each person is a name, a role, a presence ("online", "away" or "busy"), an activity and ago, how many minutes ago they were last seen (0 means active now). The counts on the pills and the "Showing 4 of 8" line come from the same list, so nothing else needs to change. Connect it to your own presence data by replacing PEOPLE with what your API returns.

Presence is the one place colour carries meaning, so the dot uses the Status tokens: online, away and busy. The same word is written beside it in the row, so nobody relies on colour alone. Everything else, the pills included, stays in foreground weights, and the pressed pill is solid foreground so the page's one primary colour stays on its main action.

It's counted from the moment the page loads: "22 minutes ago" keeps counting up on its own as the page stays open. Nothing about the current time is drawn into the HTML, so the server and the browser agree on what they first render. Replace ago with a real timestamp from your API when you wire it up.

The pills are a labelled group of toggle buttons. Tab enters the group and the arrow keys move between the pills. Space or Enter picks one, and picking the pressed pill again changes nothing, so one is always on. Each change is read out once by the polite line beside the pills ("Showing 2 of 8 people").

The pills sit in a sideways scroller that runs rail to rail, and each row folds into three short lines: the name, what they are doing, and their status with when they were last seen. The role is hidden on phones. The list holds its height whichever pill is on.

The list area holds the height of all eight rows, so a short result leaves empty room under it instead of pulling the next section up. The closing space is part of the block; it draws no rule of its own.