Podcast Season Grid Profile Block for React

Edit the three season arrays (ONE, TWO, THREE) in the Ark file: each row is [title, guest, seconds, downloads], and a season has a name and the day its first episode aired. Everything else is worked out from them: the grid's columns come from the longest season, the weights from each episode's rank among all, the dates from the season's start plus a week per episode, and the averages from the rows. Leave the guest empty for a solo episode.

Every episode is ranked by the figure you chose (downloads or length) and the ranks are cut into four equal steps, so there are always about as many cells at each weight. The weights are tints of the foreground colour, never a hue, and every cell prints its own number, so no meaning rests on shade alone. The best episode of each season carries a triangle in the cell and ", season best" in its spoken name.

The cells are native radios in one group named "Episodes, by season", so Tab enters the grid at the picked episode and the arrow keys step through the episodes in order, picking each as you go. A screen reader hears the season, the episode, its title and its figure ("Season 2, episode 3: Switchboard, 21.3K"). The blank cells where a season ran short hold nothing and are skipped. The two weighing buttons are a Toggle Group: the arrow keys follow the layout's direction there.

The grid is wider than the screen, so it scrolls sideways inside its own region while the season names stay at the start; the next columns peek in as the affordance. The picked episode's band, its three figures and the status line sit under it. Nothing else changes: the same table and the same radios are used at every width.

Everything. Weighing, picking and the averages change what is on the page and the polite status line, and nothing is sent or fetched; there is no player, no waveform and no chapter list, and nothing plays. To wire it up, replace the typed arrays with your host's stats (a server component can pass them in), keep the helpers that derive the weights, the dates and the averages, and keep the status line.

The grid is a real table with a caption that says what its cells show, th cells for the seasons and the episode numbers, and radios with full names. The status line is a polite live region present from the start and it speaks the weighing and the pick, not every arrow press twice. Focus is a visible double ring on the picked cell, the entrance is a CSS fade that stops under reduced motion, and the logical classes keep it correct in a right-to-left layout (the numbers stay left to right).