move tsx kit -> uikit

2026-07-13 09:17:11 -04:00
parent 98978e4930
commit 9243d142e9
37 changed files with 20 additions and 19 deletions
--- a/web/uikit/EnvBadge.tsx
+++ b/web/uikit/EnvBadge.tsx
@@ -0,0 +1,37 @@
+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>;
+}