38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
import { ENV_TYPE, isNonProdEnv } from "../env.ts";
|
|
|
|
// The deployment environment is baked into the bundle at build time (env.ts
|
|
// reads esbuild's __ENV_TYPE__ define), so it is a plain module constant here —
|
|
// no runtime globalThis read. Re-exported for callers that historically imported
|
|
// isNonProdEnv from this module.
|
|
export { isNonProdEnv };
|
|
|
|
// Browser-only: tag <html> so any env-specific styling can hook in. Guarded
|
|
// because the SSR DOM shim has no document.documentElement.
|
|
(function markEnvOnRoot() {
|
|
if (isNonProdEnv() && typeof document !== "undefined" && document.documentElement) {
|
|
document.documentElement.dataset.env = ENV_TYPE;
|
|
}
|
|
})();
|
|
|
|
const BADGE_BASE = "pointer-events-none select-none absolute top-0 -right-2 z-10 " +
|
|
"rounded px-1 py-px text-[0.5rem] font-bold uppercase leading-none tracking-wider shadow-sm";
|
|
|
|
/**
|
|
* Small environment badge pinned to the corner of the app logo. Renders
|
|
* nothing in production. Drop it inside a `position: relative` wrapper around
|
|
* the logo image so it anchors to the logo's top-right corner.
|
|
*/
|
|
export function EnvBadge() {
|
|
if (!isNonProdEnv()) return null;
|
|
|
|
const label = ENV_TYPE === "development" ? "DEV"
|
|
: ENV_TYPE === "staging" ? "STAGING"
|
|
: ENV_TYPE.toUpperCase();
|
|
|
|
const tone = ENV_TYPE === "development" ? "bg-orange-500 text-white"
|
|
: ENV_TYPE === "staging" ? "bg-yellow-400 text-gray-900"
|
|
: "bg-neutral-700 text-white";
|
|
|
|
return <span class={`${BADGE_BASE} ${tone}`}>{label}</span>;
|
|
}
|