Hour Scrubber Team Block for React

Edit PEOPLE at the top of the file: each person is a name, a role, an offset (minutes east of UTC, so 330 for India) and the from and until hours of their working day in their own time (24 hours). The local time, the working check, the strip and the "6 of 9 working" count are all worked out from those four numbers.

The block never reads the clock while it renders, so the server and the browser draw the same thing and the page can be cached. It starts at a fixed hour (START). The "Jump to now" button reads the browser's clock when pressed and moves the slider to the current UTC hour.

The scrubber is a slider named "Hour of the day, UTC". Tab to it, then the arrow keys move one hour, Home goes to 00 and End to 23. Its value is spoken as "14:00 UTC". A polite line reads the new count ("6 of 9 working") after each change.

Each person has a fixed offset from UTC, and their local time is the scrubbed hour plus that offset, wrapped to the day. There is no time zone database, so daylight saving never shifts a row; a person whose country changes its clocks needs a new offset. Half-hour offsets work, so 330 shows "17:30" at 12:00 UTC.

The 24-hour strips are hidden below md, and each row is a name and a role with the local time, a dot and "Working" or "Off hours" at the end. The scrubber sticks to the top of the screen while the rows scroll under it, so you can change the hour and watch the rows without scrolling back.

A dot here says whether someone is inside their working hours, not whether they are online, so it uses foreground weights: filled for working, an outline for off hours. The same words are written beside it. Real presence, online or away, is the other availability block, which uses the Status colours.