Split Feature Flags Hero Block for React

Edit ENVIRONMENTS at the top of the file. Each environment is a tab: its id, the tab's label, and its own flags, each with a key, a description, a rollout from 0 to 100 and whether it starts enabled. The rollout sets the meter's fill and the percentage next to it. Give every environment the same number of flags, and the dashboard keeps its height when you switch tabs.

Yes. The environment strip is our Tabs: the arrow keys move between environments and each tab shows its own panel of flags. Every flag has a Switch that starts on or off from the data and flips with a click or the space bar. The switches keep no state in the block, so a flipped switch goes back to its data when you leave its tab and come back.

Load the environments from your service instead of the ENVIRONMENTS constant, make each switch controlled (the Switch docs show how), and send the new value to your service when it changes. The Synced badge is the place to say that a change is saving or has failed.

The dashboard is a figure named Feature flags dashboard. Its tab list is named Environment, and each row reads its key, its description and its percentage as a rollout (30% rollout), then a switch named after the key, on or off. The window's title bar and the meters are decoration: hidden from screen readers. The ticks are hidden too, and the headline is the block's one h1.

The two columns stack below the lg breakpoint with the text first, then a rule with + marks and the dashboard in its frame, so the Shine Button stays on the first screen. Below sm the rollout meters step aside and the percentage stays; the key and the description shorten with an ellipsis, so the percentage and the switch stay at the end of the row. The Synced badge wraps above the tabs if they don't fit side by side. Nothing scrolls sideways down to 320 px.

The copy fades and rises in, the dashboard fades and settles in just after it, and the Synced dot pulses. It's all CSS, with no animation library. With reduced motion on, both columns appear in place and the dot stays still.