shadcn.io is not affiliated with official shadcn/ui
Office Bands Team Block for React Aria
Three offices of a hotel revenue-software company as bands that run from rail to rail: the city and its address, the local time there, the headcount, and three of the people you will meet in cells that share their hairlines.
Installation
Overview
A "where we work" section for React with React Aria, for Bellcombe, hotel revenue software. A start-aligned header sits over three bands (Reykjavik, Singapore and Bogotá) that run from rail to rail and end the block. Each band opens with the city, its country and its postal address, then the two things a visitor or a colleague wants first: the time there now and how many people work in the office. Under it, three of the people you will meet, each an initials avatar with a name and a specific role, in cells that share their hairlines. Every band's top rule and its + marks come from Guides. On a phone the bands stack and the people sit one per line. It's built from Avatar and Guides, with your theme's tokens for every colour. The offices, the streets and the people are invented; the cities are real.
FAQ
How do I add or change an office?
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.
How is the local time worked out?
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.
What do a screen reader and a keyboard get?
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.
How does it fit on a phone?
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.
How are the lines drawn, and how does the block end?
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.