Addition of boss banner (#151)

* chore(banner): add boss banner

* chore(version): updated bdp-ui patch fix

package.json

@@ -13,6 +13,7 @@
     "prettier:fix": "prettier --write . --ignore-path .gitignore"
   },
   "dependencies": {
+    "@bitcoin-dev-project/bdp-ui": "^1.5.2",
     "@chakra-ui/react": "^2.0.0",
     "@elastic/elasticsearch": "^8.8.0",
     "@elastic/react-search-ui": "1.20.2",

src/components/Banner.tsx

@@ -1,48 +1,20 @@
-import Image from "next/image";
-import Link from "next/link";
-import React, { useEffect, useState } from "react";
+import { Banner } from "@bitcoin-dev-project/bdp-ui";
 
-const BANNER_KEY = "FOSS-banner";
-
-const Banner = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleClose = () => {
-    if (typeof window !== "undefined") {
-      sessionStorage.setItem(BANNER_KEY, "hidden");
-    }
-    setIsOpen(false);
-  };
-
-  useEffect(() => {
-    const banner_in_session = window.sessionStorage.getItem(BANNER_KEY);
-    if (banner_in_session === "hidden") {
-      setIsOpen(false);
-    } else {
-      setIsOpen(true);
-    }
-  }, []);
-
-  if (!isOpen) return null;
+const BossBanner = () => {
   return (
-    <div className="bg-orange-100 flex items-center w-full sticky top-0 z-[10] p-2">
-      <div className="flex flex-col grow items-center text-sm md:text-base text-gray-600 font-medium text-center">
-        <p className="">{`Start Your Career in Bitcoin Open Source`}</p>
-        <div className="flex gap-2 items-center">
-          <span>{`Development in 2024 `}</span>
-          <Link href="https://learning.chaincode.com/#FOSS" target="_blank">
-            <span className="uppercase text-custom-brightOrange-200 underline whitespace-nowrap">{`Apply Today!`}</span>
-          </Link>
-        </div>
-      </div>
-      <button
-        onClick={handleClose}
-        className="relative h-[18px] w-[18px] grid place-items-center rounded-full hover:bg-orange-300"
-      >
-        <Image src="/close_icon.svg" width={10} height={10} alt="close" />
-      </button>
+    <div className={`w-full bg-bdp-background sticky top-0`}>
+      <Banner
+        headingText="Start your career in bitcoin open source —"
+        linkText="APPLY TODAY"
+        linkTo="https://learning.chaincode.com/#BOSS"
+        hasBoss
+        styles={{
+          container: "data-[has-heading='true']:h-auto",
+          bannerInfoContainer: "py-2",
+        }}
+      />
     </div>
   );
 };
 
-export default Banner;
+export default BossBanner;

src/components/navBar/NavBar.tsx

@@ -12,6 +12,7 @@ import useSearchQuery from "@/hooks/useSearchQuery";
 import { removeMarkdownCharacters } from "@/utils/elastic-search-ui-functions";
 import { useTheme } from "@/context/Theme";
 import { Tooltip } from "@chakra-ui/react";
+import BossBanner from "../Banner";
 
 function ThemeSwitcher() {
   const { theme, toggleTheme } = useTheme();
@@ -128,10 +129,11 @@ const NavBar = () => {
 
   return (
     <nav
-      className={`navBar pointer-events-auto fixed top-0  text-left md:text-center w-full text-xs md:text-base 2xl:text-xl leading-normal z-20 ${
+      className={`navBar pointer-events-auto fixed top-0  text-left md:text-center w-full text-xs md:text-base 2xl:text-xl leading-normal z-40 ${
         hiddenHomeFacet ? "bg-custom-hover-state shadow-md" : ""
       }`}
     >
+      {!hiddenHomeFacet && <BossBanner />}
       <div
         className={`flex items-center justify-between p-3 md:p-5 2xl:p-7 w-full max-w-[1920px] m-auto ${
           !hiddenHomeFacet ? "flex-row-reverse" : ""

src/pages/_app.tsx

@@ -4,6 +4,7 @@ import "@fontsource/geist-sans/600.css";
 import "@fontsource/geist-sans/700.css";
 import "@fontsource/geist-sans/800.css";
 
+import "@bitcoin-dev-project/bdp-ui/styles.css";
 import "../styles/globals.css";
 import "../styles/custom.scss";
 import "../components/customResults/styles.results.scss";