Split Status Page Block for React

Edit COMPONENTS at the top of the file: each has a name and the minutes it was down in the last 90 days. A component's uptime is 1 - minutes down / minutes in 90 days, to two decimals, and the figure in the title is the same sum over all four, so they always agree. The numbers in the block are example data.

The state is the word and a filled square at the end of the row. Add a state to the component, show a different word with a different glyph (a half square or a ring, never colour alone) and change the line above the list; the one real alert may use the status dot. Keep the word, so the row reads the same without the glyph.

From the typed RELEASES list: a kind (New, Improved, Fixed or Security, each an icon and a word), a version, an ISO date written as text from a month table so the server and the browser agree, a title that links to the release and one sentence. "View all releases" is a ghost button that takes your link. The button renders the link it's given with render, with nativeButton={false}.

The page column is the grid itself, so the halves carry their own padding and the end half's divider starts at the top rule. A + marks where they meet on large screens; below lg the same crossing is drawn as a rule across the top of the stacked second half.

The halves stack with the status first, so "All systems operational" and the components land on the first screen. A component row wraps its state and uptime under its name when they don't fit, and nothing scrolls sideways at 320 pixels.

Yes. Percentages and versions are isolated so they stay in reading order, the arrow on "View all releases" mirrors, and the divider follows the page's direction.