shadcn.io is not affiliated with official shadcn/ui
Time Zone Overlap FAQ Block for Vue
A hiring FAQ with a time-zone check in a band: choose your zone and read your overlap with the team's core hours, with a 24-hour strip beneath, above seven questions about the process and perks.
Installation
Overview
An FAQ for Vue with Ark UI. A start-aligned header sits over a band with a time-zone check: choose your zone in the Select and the band reads "Your overlap: 4 hours", worked out from the team's core hours, 10:00 to 16:00 UTC, and a 9 to 5 day on your clock. Under it a 24-hour strip, half an hour a cell, shows the team's core hours, your day and where they meet; it scrolls inside its own frame on a phone. Seven questions about the process and perks follow in hairline rows, each with a pair of chevrons that flip when it opens. It's built from Select, Accordion and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For remote companies whose candidates ask first whether the clocks line up.
FAQ
How do I change the core hours and the zones?
Edit the constants at the top of the file. CORE_START and CORE_END are the team's core hours in minutes after midnight UTC, DAY_START and DAY_END the candidate's day on their own clock, and MIN_OVERLAP the least overlap you ask for. ZONES lists each place with its offset in minutes: add one by adding a line. The overlap, the number in the band and the strip all come from the same two functions, so they can't disagree.
Does it handle daylight saving time?
No, deliberately. Offsets are standard time, and the caption under the strip says so, because daylight saving changes on different days in different places and a fixed page would be wrong for part of the year. If your core hours are tied to a city, express them in that city's standard time and say which.
What do screen readers and keyboards get?
The Select is named "Your time zone" and announces the zone it holds; the number beneath it is a polite status, so "Your overlap: 3 hours" and its sentence are read out when you choose another zone. The strip is decoration for the same number, so it's hidden from assistive technology; its frame is a named region you can focus and scroll with the arrow keys on a phone.
Are the closed answers in the page's markup?
Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens. The strip and the number are state, so only the questions are in the markup.
Can I move between questions with the keyboard?
Tab moves from the Select to the strip and on down the rows; Enter or Space opens a question. In the Select, the arrow keys and typing move through the zones. The Up and Down arrows also move between questions, and Home and End jump to the first and last.
How does it fit on a phone?
The Select goes full width with the overlap under it, and the strip keeps a minimum width of 36 rem inside its frame, which scrolls sideways and starts at 06:00 so your working hours are in view, while the row names stay put at the start. The strip's hours stay in clock order in right-to-left layouts, as time does.