feat(app): env-gated banner (EnvBanner) for non-prod environments
Renders a thin fixed banner only when NEXT_PUBLIC_ENV_LABEL is set; production leaves it unset so nothing shows. Used to mark the staging instance. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
parent
4da39fe5d1
commit
b592358db0
2 changed files with 35 additions and 1 deletions
|
|
@ -1,6 +1,7 @@
|
||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Inter, JetBrains_Mono } from "next/font/google";
|
import { Inter, JetBrains_Mono } from "next/font/google";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
import { EnvBanner } from "@/components/env-banner";
|
||||||
|
|
||||||
const inter = Inter({
|
const inter = Inter({
|
||||||
subsets: ["latin"],
|
subsets: ["latin"],
|
||||||
|
|
@ -29,7 +30,10 @@ export default function RootLayout({
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en" className={`${inter.variable} ${jetbrainsMono.variable}`}>
|
<html lang="en" className={`${inter.variable} ${jetbrainsMono.variable}`}>
|
||||||
<body>{children}</body>
|
<body>
|
||||||
|
<EnvBanner />
|
||||||
|
{children}
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
30
App/components/env-banner.tsx
Normal file
30
App/components/env-banner.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
// Thin fixed banner shown only when NEXT_PUBLIC_ENV_LABEL is set (e.g. staging).
|
||||||
|
// Production never sets the var, so it renders nothing there.
|
||||||
|
export function EnvBanner() {
|
||||||
|
const label = process.env.NEXT_PUBLIC_ENV_LABEL;
|
||||||
|
if (!label) return null;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
role="status"
|
||||||
|
style={{
|
||||||
|
position: "fixed",
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
zIndex: 9999,
|
||||||
|
height: 18,
|
||||||
|
lineHeight: "18px",
|
||||||
|
textAlign: "center",
|
||||||
|
background: "#b45309",
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 11,
|
||||||
|
fontWeight: 700,
|
||||||
|
letterSpacing: "0.06em",
|
||||||
|
pointerEvents: "none",
|
||||||
|
fontFamily: "var(--font-sans), system-ui, sans-serif",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue