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 { Inter, JetBrains_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { EnvBanner } from "@/components/env-banner";
|
||||
|
||||
const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
|
|
@ -29,7 +30,10 @@ export default function RootLayout({
|
|||
}) {
|
||||
return (
|
||||
<html lang="en" className={`${inter.variable} ${jetbrainsMono.variable}`}>
|
||||
<body>{children}</body>
|
||||
<body>
|
||||
<EnvBanner />
|
||||
{children}
|
||||
</body>
|
||||
</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