feat(news-banner): add NewsBanner component to display registration information

Author: eric15342335

src/app/layout.tsx

@@ -2,11 +2,14 @@ import { siteConfig } from "@/lib/config";
 import { GeistSans } from "geist/font/sans";
 import type { Metadata } from "next";
 import "./globals.css";
+import { SmartLink } from "@/components/primitives/smart-link";
 import { Footer } from "@/components/sections/footer";
 import { Header } from "@/components/sections/header";
+import { NewsBanner } from "@/components/sections/news-banner";
 import { ThemeProvider } from "@/providers/theme-provider";
 import { Analytics } from "@vercel/analytics/next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
+import { ExternalLink } from "lucide-react";
 
 const siteUrl = process.env.SITE_URL;
 
@@ -95,6 +98,16 @@ export default function RootLayout({
           defaultTheme="system"
           enableSystem
         >
+          <NewsBanner>
+            ALPHA-HKU is awaiting registration with{" "}
+            <SmartLink
+              href="https://www.ccso.hku.hk/"
+              className="hover:underline"
+            >
+              HKU CCSO
+              <ExternalLink className="inline h-2.5 w-2.5 align-super" />
+            </SmartLink>
+          </NewsBanner>
           <Header />
           <main className="min-h-[calc(100vh-var(--header-height))] flex-1">{children}</main>
           <Footer />

src/components/sections/news-banner.tsx

@@ -0,0 +1,14 @@
+import { cn } from "@/lib/utils";
+
+export function NewsBanner({ children }: { children: React.ReactNode }) {
+  return (
+    <p
+      className={cn(
+        "border-b border-amber-500/20 bg-amber-500/10 py-2 dark:border-amber-500/30 dark:bg-amber-500/5",
+        "text-center text-sm text-amber-900 dark:text-amber-100" // text styles
+      )}
+    >
+      {children}
+    </p>
+  );
+}