Add announcement banner to show updates or important information (#350)

* Add contrast color

* Add crypto-js for md5 hash

* Add announcement banner

src/components/ui/AnnouncementBanner.tsx

@@ -0,0 +1,92 @@
+import InlineLink from "@components/InlineLink";
+import { cn } from "@utils/helpers";
+import { cva, VariantProps } from "class-variance-authority";
+import { ArrowRightIcon, XIcon } from "lucide-react";
+import * as React from "react";
+import { useAnnouncement } from "@/contexts/AnnouncementProvider";
+
+const variants = cva(
+  {},
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-nb-gray-900/50 border-nb-gray-800/30 border-b text-nb-gray-200",
+        important: "from-netbird to-netbird-400 bg-gradient-to-b text-white",
+      },
+      tagBadge: {
+        default: "bg-nb-gray-200/10 text-nb-gray-100 font-medium",
+        important: "bg-white text-netbird font-medium",
+      },
+      closeButton: {
+        default:
+          "bg-nb-gray-900 rounded-md p-1 text-nb-gray-300 hover:bg-nb-gray-800",
+        important:
+          "bg-netbird-100 rounded-md p-1 text-netbird-600 hover:bg-white",
+      },
+      inlineLink: {
+        default: "text-nb-blue-400 hover:underline",
+        important: "!text-white underline hover:opacity-80",
+      },
+    },
+  },
+);
+
+export type AnnouncementVariant = VariantProps<typeof variants>;
+
+export const AnnouncementBanner = () => {
+  const { bannerHeight, closeAnnouncement, announcements } = useAnnouncement();
+  const announcement = announcements?.find((a) => a.isOpen);
+
+  return announcement ? (
+    <div
+      className={cn(
+        "flex items-center justify-center text-sm px-8 font-light",
+        variants({ variant: announcement.variant }),
+      )}
+      style={{ height: bannerHeight }}
+    >
+      <div className={"flex items-center gap-2"}>
+        {announcement.tag && (
+          <div
+            className={cn(
+              "bg-nb-gray-200/10 backdrop-blur text-nb-gray-100 font-medium tracking-wide uppercase text-[10px] py-2.5 px-2 rounded-md leading-[0]",
+              variants({ tagBadge: announcement.variant }),
+            )}
+          >
+            {announcement.tag}
+          </div>
+        )}
+        <div>
+          {announcement.text}
+          {announcement.link && (
+            <InlineLink
+              href={announcement.link || "#"}
+              target={announcement.isExternal ? "_blank" : undefined}
+              className={cn(
+                "ml-2 !text-sm",
+                variants({ inlineLink: announcement.variant }),
+              )}
+            >
+              {announcement.linkText || "Learn more"}
+              <ArrowRightIcon size={14} />
+            </InlineLink>
+          )}
+        </div>
+      </div>
+      {announcement.closeable && (
+        <div className={"absolute right-0 px-4"}>
+          <div
+            className={cn(
+              "rounded-md p-1 text-nb-gray-300 transition-all cursor-pointer",
+              variants({ closeButton: announcement.variant }),
+            )}
+            onClick={() => closeAnnouncement(announcement.hash)}
+          >
+            <XIcon size={14} />
+          </div>
+        </div>
+      )}
+    </div>
+  ) : null;
+};

src/contexts/AnnouncementProvider.tsx

@@ -0,0 +1,90 @@
+import { AnnouncementVariant } from "@components/ui/AnnouncementBanner";
+import { useLocalStorage } from "@hooks/useLocalStorage";
+import md5 from "crypto-js/md5";
+import React, { useEffect, useState } from "react";
+
+const initialAnnouncements: Announcement[] = [];
+
+export interface Announcement extends AnnouncementVariant {
+  tag: string;
+  text: string;
+  link?: string;
+  linkText?: string;
+  isExternal?: boolean;
+  closeable: boolean;
+}
+
+interface AnnouncementInfo extends Announcement {
+  isOpen: boolean;
+  hash: string;
+}
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const AnnouncementContext = React.createContext(
+  {} as {
+    bannerHeight: number;
+    announcements?: AnnouncementInfo[];
+    closeAnnouncement: (hash: string) => void;
+  },
+);
+
+const bannerHeight = 40;
+
+export default function AnnouncementProvider({ children }: Props) {
+  const [height, setHeight] = useState(0);
+  const [closedAnnouncements, setClosedAnnouncements] = useLocalStorage<
+    string[]
+  >("netbird-closed-announcements", []);
+  const [announcements, setAnnouncements] = useState<AnnouncementInfo[]>();
+
+  useEffect(() => {
+    const initial = initialAnnouncements.map((announcement) => {
+      const hash = md5(announcement.text).toString();
+      const isOpen = !closedAnnouncements.some((h) => h === hash);
+      return {
+        ...announcement,
+        hash,
+        isOpen,
+      };
+    });
+    if (initial.length > 0) {
+      setAnnouncements(initial);
+    }
+  }, [closedAnnouncements]);
+
+  const closeAnnouncement = (hash: string) => {
+    setClosedAnnouncements([...closedAnnouncements, hash]);
+    setAnnouncements(() => {
+      return announcements?.map((a) => {
+        if (a.hash === hash) {
+          return { ...a, isOpen: false };
+        }
+        return a;
+      });
+    });
+  };
+
+  useEffect(() => {
+    const isAnnouncementOpen = announcements?.some((a) => a.isOpen);
+    if (isAnnouncementOpen) {
+      setHeight(bannerHeight);
+    } else {
+      setHeight(0);
+    }
+  }, [announcements]);
+
+  return (
+    <AnnouncementContext.Provider
+      value={{ bannerHeight: height, announcements, closeAnnouncement }}
+    >
+      {children}
+    </AnnouncementContext.Provider>
+  );
+}
+
+export const useAnnouncement = () => {
+  return React.useContext(AnnouncementContext);
+};

src/layouts/AppLayout.tsx

@@ -11,6 +11,7 @@ import React from "react";
 import { Toaster } from "react-hot-toast";
 import OIDCProvider from "@/auth/OIDCProvider";
 import AnalyticsProvider from "@/contexts/AnalyticsProvider";
+import AnnouncementProvider from "@/contexts/AnnouncementProvider";
 import DialogProvider from "@/contexts/DialogProvider";
 import ErrorBoundaryProvider from "@/contexts/ErrorBoundary";
 import { GlobalThemeProvider } from "@/contexts/GlobalThemeProvider";
@@ -35,9 +36,11 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
             <GlobalThemeProvider>
               <ErrorBoundaryProvider>
                 <OIDCProvider>
-                  <TooltipProvider delayDuration={0}>
-                    {children}
-                  </TooltipProvider>
+                  <AnnouncementProvider>
+                    <TooltipProvider delayDuration={0}>
+                      {children}
+                    </TooltipProvider>
+                  </AnnouncementProvider>
                 </OIDCProvider>
               </ErrorBoundaryProvider>
             </GlobalThemeProvider>

src/layouts/DashboardLayout.tsx

@@ -9,6 +9,7 @@ import { useIsSm, useIsXs } from "@utils/responsive";
 import { AnimatePresence, motion } from "framer-motion";
 import { XIcon } from "lucide-react";
 import React from "react";
+import { useAnnouncement } from "@/contexts/AnnouncementProvider";
 import ApplicationProvider, {
   useApplicationContext,
 } from "@/contexts/ApplicationProvider";
@@ -16,7 +17,7 @@ import CountryProvider from "@/contexts/CountryProvider";
 import GroupsProvider from "@/contexts/GroupsProvider";
 import UsersProvider from "@/contexts/UsersProvider";
 import Navigation from "@/layouts/Navigation";
-import Navbar from "./Header";
+import Navbar, { headerHeight } from "./Header";
 
 export default function DashboardLayout({
   children,
@@ -43,7 +44,7 @@ function DashboardPageContent({ children }: { children: React.ReactNode }) {
   const isXs = useIsXs();
 
   const navOpenPageWidth = isSm ? "50%" : isXs ? "65%" : "80%";
-
+  const { bannerHeight } = useAnnouncement();
   return (
     <div className={cn("flex flex-col h-screen", mobileNavOpen && "flex")}>
       {mobileNavOpen && (
@@ -148,7 +149,7 @@ function DashboardPageContent({ children }: { children: React.ReactNode }) {
             <div
               className={"flex flex-row flex-grow"}
               style={{
-                height: "calc(100vh - 75px)",
+                height: `calc(100vh - ${headerHeight + bannerHeight}px)`,
               }}
             >
               <Navigation hideOnMobile />

src/layouts/Header.tsx

@@ -1,17 +1,21 @@
 "use client";
 
 import Button from "@components/Button";
+import { AnnouncementBanner } from "@components/ui/AnnouncementBanner";
 import DarkModeToggle from "@components/ui/DarkModeToggle";
 import UserDropdown from "@components/ui/UserDropdown";
-import { Navbar } from "flowbite-react";
+import { cn } from "@utils/helpers";
 import { MenuIcon } from "lucide-react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import NetBirdLogo from "@/assets/netbird.svg";
 import NetBirdLogoFull from "@/assets/netbird-full.svg";
+import { useAnnouncement } from "@/contexts/AnnouncementProvider";
 import { useApplicationContext } from "@/contexts/ApplicationProvider";
 
+export const headerHeight = 75;
+
 export default function NavbarWithDropdown() {
   const router = useRouter();
   const Logo = useMemo(() => {
@@ -34,42 +38,55 @@ export default function NavbarWithDropdown() {
   }, []);
 
   const { toggleMobileNav } = useApplicationContext();
-
+  const { bannerHeight } = useAnnouncement();
   return (
     <>
-      <Navbar
-        fluid
-        className={
-          "border-b dark:border-zinc-700/40 fixed z-50 h-[75px] px-3 md:px-4 w-full"
-        }
+      <div
+        className={"fixed z-50 w-full"}
+        style={{
+          height: headerHeight + bannerHeight,
+        }}
       >
-        <div className={"flex items-center gap-4 md:hidden"}>
-          <Button
-            className={"!px-3 md:hidden"}
-            variant={"default-outline"}
-            onClick={toggleMobileNav}
-          >
-            <div>
-              <MenuIcon size={20} className={"relative"} />
-            </div>
-          </Button>
-        </div>
-        <Navbar.Brand
-          onClick={() => router.push("/peers")}
-          className={"cursor-pointer hover:opacity-70 transition-all"}
+        <AnnouncementBanner />
+        <div
+          className={cn(
+            "bg-white px-2 py-4 dark:border-gray-700 dark:bg-nb-gray/50 backdrop-blur-lg sm:px-6",
+            "border-b dark:border-zinc-700/40 px-3 md:px-4 w-full",
+            "flex justify-between items-center transition-all",
+          )}
         >
-          {Logo}
-        </Navbar.Brand>
-
-        <div className="flex md:order-2 gap-4">
-          <div className={"hidden md:block"}>
-            <DarkModeToggle />
+          <div className={"flex items-center gap-4 md:hidden"}>
+            <Button
+              className={"!px-3 md:hidden"}
+              variant={"default-outline"}
+              onClick={toggleMobileNav}
+            >
+              <div>
+                <MenuIcon size={20} className={"relative"} />
+              </div>
+            </Button>
+          </div>
+          <div
+            onClick={() => router.push("/peers")}
+            className={"cursor-pointer hover:opacity-70 transition-all"}
+          >
+            {Logo}
           </div>
 
-          <UserDropdown />
+          <div className="flex md:order-2 gap-4">
+            <div className={"hidden md:block"}>
+              <DarkModeToggle />
+            </div>
+
+            <UserDropdown />
+          </div>
         </div>
-      </Navbar>
-      <div className={"h-[75px]"}></div>
+      </div>
+      <div
+        style={{
+          height: headerHeight + bannerHeight,
+        }}
+      ></div>
     </>
   );
 }