shadcn.io is not affiliated with official shadcn/ui
Office Tabs Team Block for Vue
The four offices of a surveying app in a split: a vertical tab rail of offices beside a page with the address, the local time, the opening hours, the people who work there and a Plan a visit link.
Installation
Overview
An offices section for Vue with Ark UI, for Tennant & Ross, a surveying app. The first column holds a compact header and a vertical tab rail of four offices (Perth, Brisbane, Nairobi and Windhoek), each row with its city, its country and its headcount; a hairline divider, meeting the top rule with a + mark, separates it from the second column. The page for the chosen office gives its address, the time there now, its opening hours, the people who work in it in hairline rows and a Plan a visit link. Every page is also drawn once, unseen, in the same grid cell, so the cell is as tall as the tallest and switching offices moves nothing. On a phone the rail becomes a row of chips that scrolls sideways above the page. It's built from Tabs, Avatar, Button 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 change the offices?
Edit OFFICES at the top of the file. An office has an id, a city, a country, the address as one string per line, its opening hours as term and value pairs, an offset (minutes east of UTC) with its offsetLabel, and its people. The headcounts in the rail and the total in the header come from the people lists.
How does the keyboard work?
It's a vertical tab list: Tab moves into it, the up and down arrow keys move between offices, and Home and End jump to the ends. The same keys work when the rail is a row of chips on a phone. The page is the next stop after the rail, and its Plan a visit link follows.
How is the local time worked out?
In the browser, after the page loads, from the office's fixed offset, refreshed every half minute; until then it reads --:--, so the server and the browser agree. The four example cities keep no daylight saving, so a fixed offset is always correct for them.
Does the block change height when I switch offices?
No. Every page is drawn once more, unseen (hidden from assistive technology and the keyboard), in the same grid cell as the real one, so the cell is as tall as the tallest page. The real page is the only one a reader or a find-in-page can reach.