Environment Pill Banner Block for React

They are constants at the top of the file (DEPLOY). Fill them from your build: pass them as props from a server component, or read them from environment variables your host exposes at build time, such as a branch name and a commit SHA, and shorten the SHA to seven characters. Never read the date at render time: it makes the server and the browser disagree.

Swap the variant on Status: warning for staging, info for preview, success for production, destructive for a broken build. The word beside the dot always says what the environment is, so the colour is never the only signal. Keep the text in the foreground colours.

Copy Button writes the hash with navigator.clipboard. If the browser refuses it (no permission, or a page that isn't served over HTTPS) the icon turns into a cross and the status line says "Couldn't copy" instead of "Commit hash copied". After three seconds the copy icon comes back. The button's accessible name includes the hash, "Copy commit hash a3f7c2e".

Render the block only when your environment isn't production: wrap it in a condition on the server (if (env === "production") return null). Because it holds no state of its own, it stays a server component apart from the copy button.

The pill renders in flow so the preview and a stack of blocks can see it. To float it, add fixed inset-x-4 bottom-4 z-50 mx-auto to the pill (the section named for the environment) and remove the block's wrapper padding if the pill lives on its own. To keep it at the start corner instead of the centre, use fixed bottom-4 start-4 z-50 and drop inset-x-4 and mx-auto. Keep room for the home indicator with bottom-[max(1rem,env(safe-area-inset-bottom))].

Below sm the pill is a rounded card: the dot and "Staging" with the copy button at the end on the first row, the branch and the hash under them (they wrap rather than overflow). From sm it is one row with a hairline between the environment and the build. At 320 pixels nothing scrolls sideways, and in a right-to-left layout it mirrors.