Office Bands Team Block for React

Edit OFFICES at the top of the file. An office has an id, a city, a country, the address as one string per line, a headcount, an offset (minutes east of UTC) with its offsetLabel, and the three people to show. The total in the header sentence is summed from the headcounts; the sentence that names the cities is plain text, so edit it too.

In the browser, after the page loads, from the office's fixed offset: hours and minutes at that offset, refreshed every half minute. Until then each clock shows --:--, so the server's HTML and the browser's first render are the same and nothing flickers. A fixed offset never follows daylight saving, which is why the three example cities are ones that don't keep it. For a city that changes its clocks, swap the offset for a time-zone name and format it with Intl.DateTimeFormat.

A list of three offices; each has a heading with the city, an address element, a description list with the local time and the headcount, and a list of the people with their names as headings. The time sits in a time element. There is nothing to operate, so nothing is in the tab order.

Each band stacks: the city and address, then the time and the headcount side by side, then the three people one per line with a hairline between them. The three bands come to about two screens.

Each band draws its top rule with Guides, with + marks where it meets the rails. The row of people has a plain hairline above it and, from the medium breakpoint, a divider between its cells. The last band draws no bottom rule: the next block's top rule closes it, so no line is doubled.

No. The cities are real; the streets, numbers and postcodes are made up. Replace them with your own before you ship.