Leahnaya/hackdex-website
1
0
Fork 0
mirror of https://github.com/Hackdex-App/hackdex-website.git synced 2026-04-05 00:54:50 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add NoticeBanner customizeable with Vercel Edge Config

Browse Source
This commit is contained in:
Jared Schoeny 2025-12-15 09:15:57 -10:00
parent 75e7f0fb32
commit 12bb5ed34a
2 changed files with 38 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/layout.tsx
View File

@ -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 />

36
src/components/NoticeBanner.tsx Normal file
View File

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