shadcn.io is not affiliated with official shadcn/ui
Working Hours Strip Team Block for React
How to work with one producer at a podcast host: her three channels ranked 1 to 3, how fast she replies on each, and her working day as a 24-hour strip with a marker at the time it is there now.
Installation
Overview
A working-with-one-person section for React with Base UI, for Grasmere, a podcast host. A split behind a hairline divider: the start half is a header and the person (an initials avatar, a name and a role); the end half is their three channels ranked 1 to 3 in an ordered list, each with a line on what it is for, and under it a list of how quickly they reply on each. Under both, a band holds their working day as a 24-hour strip: a solid span where they reply fast, a lighter one for focus time, and, once the page has loaded, a marker at the time it is there now. On a phone the halves stack. It's built from Data List, Avatar and Guides, with solid colour mixes so the strip holds in any theme. The person and her habits are fictional.
FAQ
How do I change the person, the channels or the hours?
Edit the constants at the top of the file. PERSON is the name and role; RANKS is the channels, best first, each with a sentence on what it is for; REPLIES is the reply times; SPANS is the working day in minutes since midnight (each span is fast or focus); PLACE, OFFSET and OFFSET_LABEL say where that day is. The strip, its legend sentence and the marker are computed from them.
How is the strip read by a screen reader?
The strip is a single image with a full sentence ("Working day in Accra, UTC+0: replies fast from 09:00 to 12:30 and from 14:00 to 17:30; focus time, with slower replies, from 12:30 to 14:00; offline the rest of the day."). The hour labels and the marker are decoration, and the legend under the strip is a plain list.
How does the marker know the time?
In the browser, after the page loads, from the fixed offset: hours and minutes there, refreshed every half minute. Until then the marker is unseen and the text says --:--, so the server's HTML and the browser's first render match. A fixed offset ignores daylight saving, so the example uses a city that doesn't keep it.
Related
- Pro
Channel Matrix Team
Hours and placesHow to reach the people at an uptime monitor: one table of people by chat, email, video and phone, with the channel to try first drawn as a filled check, how fast each replies, and a caption for urgent.
- Pro
Hybrid Week Desks Team
Hours and placesA coworking company's hybrid week as a table: eight people by Monday to Friday, each cell a desk code like BER-214 or Remote, a who-is-in count under each day and a select to look at one office.
- Pro
Status Board Team
Hours and placesA three-column board of Online, In focus and Away for a project tracker's team, each person with their activity and local time, and a Set my status group that moves one 'You' avatar between the columns.
- Pro
Language Filter Support Team
Lists and directoriesThe six people who answer for a returns portal in hairline rows: a presence dot with a reply time and the languages each speaks, and five language chips that float the people who speak one to the top.
- Pro
Slot Picker Office Hours Team
Hours and placesWeekly office hours of a pair-programming service: five day tabs, each with three engineers' half-hour slots as pills, and a single Shine Button that reads 'Book Thu 14:00 with Noor' once a slot is picked.
- Pro
Hour Scrubber Team
Hours and placesA 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.