From f5c7c7e75729f8843b94cf1012d8794502ac169a Mon Sep 17 00:00:00 2001
From: Xharles <charlesnzubechukwu000@gmail.com>
Date: Wed, 10 Jan 2024 11:00:29 +0100
Subject: [PATCH] add new items notification badge

---
 .../navigation/MobileBottomNav.tsx             | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/ui-kit/src/mobile-components/navigation/MobileBottomNav.tsx b/packages/ui-kit/src/mobile-components/navigation/MobileBottomNav.tsx
index abf81a5e0..f6fa38fe1 100644
--- a/packages/ui-kit/src/mobile-components/navigation/MobileBottomNav.tsx
+++ b/packages/ui-kit/src/mobile-components/navigation/MobileBottomNav.tsx
@@ -6,46 +6,60 @@ const navigation = [
         name: "Superfeed",
         href: "#",
         current: true,
+        hasNew: true,
         icon: <HomeSVG className="w-4 h-4 my-0.5" />,
     },
     {
         name: "Portfolio",
         href: "#",
         current: false,
+        hasNew: true,
+
         icon: <HomeSVG className="w-4 h-4 my-0.5" />,
     },
     {
         name: "Events",
         href: "#",
         current: false,
+        hasNew: false,
         icon: <HomeSVG className="w-4 h-4 my-0.5" />,
     },
     {
         name: "Settings",
         href: "#",
         current: false,
+        hasNew: true,
         icon: <HomeSVG className="w-4 h-4 my-0.5" />,
     },
     {
         name: "Places",
         href: "#",
         current: false,
+        hasNew: false,
         icon: <HomeSVG className="w-4 h-4 my-0.5" />,
     },
 ];
 
-const NavItem = ({ href, icon, current }: (typeof navigation)[0]) => (
+const NavItem = ({ href, icon, current, hasNew }: (typeof navigation)[0]) => (
     <a
         href={href}
         className="inline-flex flex-col items-center justify-center px-5"
     >
         <span
             className={twMerge(
-                "border border-gray-200 py-2 px-3 rounded-2xl",
+                "border border-gray-200 py-1 px-2 rounded-2xl relative",
                 current && "bg-black border-black"
             )}
         >
             {icon}
+            {hasNew && (
+                <span
+                    className={twMerge(
+                        "w-2 h-2 bg-black border border-gray-200 rounded-full my-1 absolute -top-0.5 -right-0.5",
+                        current && "bg-gray-200 border-black"
+                    )}
+                />
+            )}
         </span>
     </a>
 );