From 12bb5ed34a9ab863893fa8b85720ff7c8d28ffcb Mon Sep 17 00:00:00 2001
From: Jared Schoeny <jared@schoeny.com>
Date: Mon, 15 Dec 2025 09:15:57 -1000
Subject: [PATCH] Add `NoticeBanner` customizeable with Vercel Edge Config

---
 src/app/layout.tsx              |  2 ++
 src/components/NoticeBanner.tsx | 36 +++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 src/components/NoticeBanner.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0969661..2b05c0d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,6 +6,7 @@ import Footer from "@/components/Footer";
 import MobileFooterSpacer from "@/components/MobileFooterSpacer";
 import { BaseRomProvider } from "@/contexts/BaseRomContext";
 import { AuthProvider } from "@/contexts/AuthContext";
+import NoticeBanner from "@/components/NoticeBanner";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -41,6 +42,7 @@ export default function RootLayout({
             <div className="fixed inset-0 -z-10">
               <div className="aurora" />
             </div>
+            <NoticeBanner />
             <Header />
             <main className="flex-1 flex flex-col">{children}</main>
             <Footer />
diff --git a/src/components/NoticeBanner.tsx b/src/components/NoticeBanner.tsx
new file mode 100644
index 0000000..d49740e
--- /dev/null
+++ b/src/components/NoticeBanner.tsx
@@ -0,0 +1,36 @@
+import { get } from "@vercel/edge-config";
+
+const NOTICE_KEY = process.env.NEXT_PUBLIC_NOTICE_KEY ?? "global_notice_message";
+
+export default async function NoticeBanner() {
+  let message: string | null = null;
+
+  try {
+    const value = await get<string | null>(NOTICE_KEY);
+    if (typeof value === "string" && value.trim().length > 0) {
+      message = value.trim();
+    }
+  } catch (error) {
+    // Fail silently if Edge Config is unavailable or misconfigured
+    return null;
+  }
+
+  if (!message) {
+    return null;
+  }
+
+  return (
+    <div className="w-full border-b border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-700/60 dark:bg-amber-950/60 dark:text-amber-100">
+      <div className="mx-auto flex max-w-screen-2xl items-center px-6 py-2 text-sm">
+        <span className="mr-2 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-amber-500 text-[11px] font-bold text-amber-50 dark:bg-amber-400 dark:text-amber-950">
+          !
+        </span>
+        <p className="line-clamp-3">
+          {message}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+