Availability Strip CTA Block for React

Edit HUBS at the top of the file: each hub is a city and an IANA timeZone such as Europe/Berlin. OPENS and CLOSES are the staffed hours in each hub's local time, shared by all hubs. The strip's sentence reads them too, so it stays true when you change them. With the defaults of 8:00 to 20:00 in New York, London and Singapore, one hub is always inside its hours, which is what the headline says; if you pick hubs or hours that leave a gap, change the headline.

The browser reads it, through Intl.DateTimeFormat with a fixed locale and each hub's time zone, so daylight saving is handled for you and the format never depends on a visitor's settings. Until it has read the time the strip shows --:-- and a muted dot, which is also what a visitor with scripts off sees. It then refreshes every 30 seconds, and the timer is cleared when the block leaves the page.

The dot is decoration. Each hub also says Online or Offline in text under its time, so the status never rests on colour alone: the dot is green when staffed and muted when not.

It is a link with href="#": point it at your scheduling page. The Shine Button renders the link it's given with render, with nativeButton={false}.

Below the lg breakpoint the headline, the framed clocks and the button stack into a column. The clocks stay in three equal columns with a hairline between them, down to 320 px wide, with the city above the time and the status under it.

Yes. The dividers, frame and spacing are logical, so they flip, and each time is wrapped so 14:05 never reads as 05:14. The hubs keep their order, since a clock is read as a list.