Category Grid Awards Block for React

Everything is derived from one list, AWARDS: each award names its category, and each cell counts the awards with its category's name, lists the first two of them (the list is newest first within each category) and says how many more there are. The header's tally is the length of the list and the number of categories. Add an award and the count, the list and the outline update together.

It is the category with the highest count; when two tie, the first in CATEGORIES wins. The outline is a ring inside the cell, and the cell also says "awards, the most", so the emphasis is never colour alone.

Each category in CATEGORIES has a glyph: a list of stroked paths in a 24 by 24 box, drawn with a 1.5 pixel round stroke in your theme's foreground. Replace the path strings, or add a category (the grid is three across from lg and two from sm, so keep the count a multiple of both, or the last row will leave a gap). Glyphs are hidden from assistive technology; the category is the heading.

No. Valedale, Wyvernhall, Zephyrcombe, Bramblewick, Brindlecombe, Corvethorpe and Dunmallow are made-up programmes and Routewell a made-up API. If you show a real award, name it in text and use its official badge only where its rules allow it.

The grid is a list named Award categories. Each cell gives the category as a heading, then its count ("4 awards, the most"), then a nested list of its newest awards, each with its name, then its programme and year, and a closing "And 2 more" where there are others. Each year sits in a bdi element so it keeps its place in a right-to-left layout.

One column of six cells, each with the glyph and name at the start and the count at the end, with its two awards under a hairline. Nothing scrolls sideways at 320 pixels. From sm the cells run two across, and from lg three.