Quarter Tabs Awards Block for React

Edit QUARTERS: each quarter has an id, a label, its months and its awards (a title, a category, a fixed date and a shape). An empty awards array gives that quarter the empty state. The counts on the tabs and the header tally are counted from the list; PROGRAMME names who announced them.

The catalog Empty: a drawn calendar, the title "No awards announced in Q3" and a line saying what to expect. It is a real panel, so the tab still opens and a screen reader hears the same sentence.

No. Every panel, the empty one included, is copied unseen into the same grid cell as the open one, so the cell is as tall as the tallest. The copies are hidden from assistive technology and the keyboard.

Tab moves focus into the tab list and then to the open panel; the arrow keys move between tabs and open each one, and Home and End jump to the first and last. This is the library's own tab behaviour.

A tab list named "Quarters of 2025", each tab named with its quarter, its months and its count in words ("Q1 Jan to Mar 2 awards"). The open panel is a list of awards with the award as a heading and the date in a time element.

The four tabs share the width and the months are hidden, leaving the quarter and its count; the panel is one column. Nothing scrolls sideways at 320 pixels.