Split Panel Calendar Grid CTA Block for React

Edit DAYS, TIMES and TAKEN at the top of the file. Each slot is a day and a time, and TAKEN lists the ones that are full as Mon-09:00; the grid, the "13 of 20 slots free" count and the first pick (FIRST) are all worked out from them. The grid is five columns by four rows, so keep to five days and four times, or change grid-cols-5 and grid-rows-4 together.

The cells are radio buttons in one group, so the grid is a single tab stop: Tab lands on the chosen slot, and the arrow keys move through the free ones and select as they go. They skip full slots, because disabled cells can't take focus. The cells are in day order, so Down and Right both walk down a day and then on to the next.

The group is named Available slots, and each cell reads its day and time, such as "Wednesday at 10:30", with ", full" added when it's taken. The weekday and time captions around the grid are decoration, since every cell already says both. The summary under the grid is a polite live region, so picking a slot announces it, and the button's link text spells out the day and the time.

Load your open slots instead of the constants, and point the button's href at your booking page with the chosen slot in the query string, such as ?slot=Wed-10:30. The block keeps no data of its own and shows weekday names only, so it never goes out of date. If your slots are in a different time zone from the visitor, say so in the caption above the grid. On Base UI, the button renders its link with render={<a href="…" />} and nativeButton={false}.

The two columns stack below the lg breakpoint with the copy first. The checklist is shown from sm up, and on a phone the grid's cells are 36px tall, so the headline, the grid and the Shine Button all land within the first screen. Five columns plus the time labels fit down to 320px without scrolling sideways, and the button and the summary wrap onto two lines when the card is narrow.

The copy fades and rises in once, the cells fade their colour when you pick one, and the Shine Button sweeps a band of light across itself on hover or focus. It's all CSS, with no animation library, and with reduced motion on everything appears in place and the light fades in instead.