From 3d77bd59bab83682152f8c0e77f655ab964ba0f0 Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Mon, 11 Nov 2024 11:08:36 +0700
Subject: [PATCH] feat: add notification badge with animated ping effect to
 navigation bar

---
 src/components/navigationBar/AuthenticatedComponents.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/navigationBar/AuthenticatedComponents.tsx b/src/components/navigationBar/AuthenticatedComponents.tsx
index 41ed528..cb5d89f 100644
--- a/src/components/navigationBar/AuthenticatedComponents.tsx
+++ b/src/components/navigationBar/AuthenticatedComponents.tsx
@@ -32,6 +32,9 @@ export const AuthenticatedComponents = ({ uid, avatarUrl }: AuthenticatedCompone
       <Link href={"/notification"}>
         <div className="relative inline-block">
           <Bell className="h-6 w-6 " />
+          <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full">
+            {displayValue}
+          </span>
           <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full animate-ping">
             {displayValue}
           </span>