mrhid6andClaude Opus 5
6953f5e972
A fifth Next.js app, built like web/ and site/: App Router, React 18, Tailwind 3, TanStack Query, standalone output. app/globals.css carries site/app/globals.css's token blocks copied verbatim rather than retyped, so the two cannot drift by transcription. Tailwind holds var() references only -- no component or config entry may contain a hex value. The semantic three are aliased: site/'s --up/--pend/--down become valid/warn/expired, so each app names the colours for what it shows. Unlike web/, there is no rewrite proxy: the browser calls admin directly, so NEXT_PUBLIC_ADMIN_API_URL must be browser-reachable and listed in admin's ADMIN_ORIGIN. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
23 lines
1.0 KiB
TypeScript
23 lines
1.0 KiB
TypeScript
/*
|
|
* Sandbox is hatched as well as coloured, so it survives a colourblind reader
|
|
* and a glance. It sits in the same place on every screen: issuing against the
|
|
* wrong environment should feel wrong before you click.
|
|
*/
|
|
const ENV = process.env.NEXT_PUBLIC_ADMIN_ENV === "sandbox" ? "sandbox" : "production";
|
|
|
|
export function EnvBadge() {
|
|
const sandbox = ENV === "sandbox";
|
|
return (
|
|
<span
|
|
className={
|
|
sandbox
|
|
? "inline-flex items-center gap-2 rounded-sm border border-warn px-2 py-1 font-mono text-[0.72rem] uppercase tracking-[0.1em] text-ink [background-image:repeating-linear-gradient(-45deg,var(--accent-wash)_0_6px,transparent_6px_12px)]"
|
|
: "inline-flex items-center gap-2 rounded-sm bg-accent px-2 py-1 font-mono text-[0.72rem] uppercase tracking-[0.1em] text-accent-ink"
|
|
}
|
|
>
|
|
<i className="h-1.5 w-1.5 shrink-0 rounded-full bg-current" />
|
|
{sandbox ? "Sandbox" : "Production"}
|
|
</span>
|
|
);
|
|
}
|