shadcn.io is not affiliated with official shadcn/ui
Hour Scrubber Team Block for Ark UI
A framed slider over the 24 hours of the day in UTC, above nine people in rows that show who is working at that hour with their local time, a day strip and a live count.
Installation
Overview
A follow-the-sun availability view for React with Ark UI, for Dovedale's customer-help desk. A compact header sits over a framed scrubber: a slider across the 24 hours of the day in UTC, with the hour in large figures, a live "6 of 9 working" count and a ghost button that jumps to the current hour. Under it nine people fill rows rail to rail. Each row shows the person's local time at the scrubbed hour, a dot and a word that say whether it falls inside their working hours, and, from md, a 24-hour strip of their day with the scrubbed hour boxed. Dragging the slider or pressing its arrow keys updates every row at once; people outside their hours dim in place. On a phone the scrubber sticks to the top while the rows scroll under it. It's built from Slider, Button, Avatar and Guides, with your theme's tokens for every colour. For a support page, a rota or a team page that shows when each person can be reached. The people are invented.
FAQ
How do I change the people and their hours?
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.
Why does it start at 11:00 and not at the current hour?
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.
How does the keyboard work?
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.
How is the local time worked out, and what about daylight saving?
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.
How does it fit on a phone?
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.
Why are the dots black and white?
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.