Status Bar Footer Block for React

From two typed constants at the top of the file: SYSTEM (a state of operational, degraded or outage, and the p95 in milliseconds) and the SUMMARY and DOT tables that turn the state into a sentence and a dot colour. The block fetches nothing. To make it live, read your status endpoint where the page renders and pass the values into SYSTEM; the markup does not change.

It is one dot for one real state, so it uses the Status component's own tokens: success for operational, warning for degraded, destructive for an outage. Colour is never alone: the sentence beside it names the state, and a screen reader hears "System status: All systems normal". Everything else in the band stays in the foreground and muted tones, so the dot is the only coloured thing in it.

The block is a footer element, the page's content-info landmark when placed outside main. The three links sit in one nav labelled Footer. The status sentence is plain text, not a live region, because it is rendered from the data rather than updated in place.

Below 1024 pixels the parts stack with room between them, and each part wraps if it must: the wordmark and copyright, then the dot and sentence beside the p95 figure, then the links. The hairlines between the parts are hidden when they would end a line. Nothing scrolls sideways at 320 pixels.

Yes. The wordmark and the p95 figure are isolated so their text and digits keep their order, and the rest of the band follows the page direction.