Categories Blog Block for React

Edit POSTS (every post, newest first, with its category and title) and CATEGORIES (a name, an icon and a one-line scope) at the top of the file. Counts, shares, the ranking and each cell's latest title are derived, so adding a post changes the numbers and the bars. A new category also needs a swatch in SWATCHES and its name in the Name type. The grid is built for six topics plus the All cell: with another count, check the spans so no slot is left empty.

Each share is rounded by the largest-remainder method: every category gets its whole percentage, and the points left over go to the categories with the biggest fractions. The bars use the same numbers as the text, so the two never disagree by a point.

The categories are ranked by post count, and the first spans two columns from sm up, so the grid says which topic the magazine writes about most. The All cell takes the slots that remain, which is what keeps every row full on a hairline grid: an empty slot would show the border colour.

Each cell is one link, its category name, and the link covers the whole cell with its focus ring drawn inside it. The icon, the swatch and the bar are decoration and hidden from assistive technology; the count and the share are text. Tab visits the seven links in reading order.

One column of seven cells, about two and a half screens. Each cell keeps its scope, latest title, count and bar. Nothing scrolls sideways at 320 pixels.

Yes. The grid, the corner swatch and the bar's fill start at the start edge, and counts and percentages are isolated with bdi, so "28% of all posts" keeps its order. The swatches are artwork and never mirror.