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:
Hardik 2026-06-19 11:56:34 +05:30
parent 4da39fe5d1
commit b592358db0
2 changed files with 35 additions and 1 deletions

View file

@ -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>
); );
} }

View 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>
);
}