feat: add banner announcing pycon africa 2026 hosts (#127)

Closes #123

components/2024/layout/navbar.jsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { QUICKET_LINK } from "@/2023/utils/constants";
 import { useState } from "react";
 import Logo from "@/components/ui/logo";
+import Banner from "@/components/banner";
 
 export default function Navbar2024() {
   const NavbarLinks = [
@@ -97,6 +98,7 @@ export default function Navbar2024() {
 
   return (
     <nav className="sticky top-0 z-10 bg-white backdrop-filter backdrop-blur-lg bg-opacity-30 border-b border-gray-200">
+      <Banner />
       <div className="mx-[6%] my-2">
         <div className="flex items-center justify-between h-16">
           <Logo />

components/banner.jsx

@@ -0,0 +1,43 @@
+"use client";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { useState } from "react";
+import Link from "next/link";
+
+export default function Banner() {
+  const [isShowed, setIsShowed] = useState(true);
+
+  return (
+    <>
+      {isShowed ? (
+        <div className="bg-gray-200 md:py-4 lg:px-24 md:px-16 px-6 py-2 text-center text-sm text-gray-900">
+          <div className="container flex items-center justify-between">
+            <p>
+              🎉 <span className="font-bold">Big Announcement!</span> 🌍 PyCon
+              Uganda to Host PyCon Africa 2026 !
+            </p>
+            <div className="flex flex-row items-center space-x-4">
+              <span className="text-blue-400">
+                <Link
+                  href="https://twitter.com/pyconafrica/status/1784915709513892285?t=OKuV23QLnKtH4ulO2G2XZA&s=19"
+                  target="_blank"
+                  className="underline"
+                >
+                  Read More
+                </Link>
+              </span>
+              <button
+                className="rounded-full text-gray-900 hover:bg-gray-800 hover:text-white focus:bg-gray-800 focus:text-white"
+                size="icon"
+                variant="ghost"
+                onClick={() => setIsShowed(false)}
+              >
+                <Cross2Icon className="h-4 w-4" />
+                <span className="sr-only">Dismiss</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+}

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.15",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.1",