From 729ac6550184f33e6c1ebced0cff32c65d130553 Mon Sep 17 00:00:00 2001
From: Anand Suthar <anandsuthar956@gmail.com>
Date: Fri, 7 Jun 2024 23:42:22 +0530
Subject: [PATCH] Added custom bell icon for novu notification center

---
 .../components/Notifications/index.tsx        | 38 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/app/(pages)/patient/components/Notifications/index.tsx b/app/(pages)/patient/components/Notifications/index.tsx
index a5ed5e87..44777f2a 100644
--- a/app/(pages)/patient/components/Notifications/index.tsx
+++ b/app/(pages)/patient/components/Notifications/index.tsx
@@ -1,9 +1,9 @@
 "use client";
 
+import { CiBellOn } from "react-icons/ci";
 import {
   NovuProvider,
   PopoverNotificationCenter,
-  NotificationBell,
 } from "@novu/notification-center";
 
 export default function Notifications({ patientId }: { patientId: string }) {
@@ -13,8 +13,42 @@ export default function Notifications({ patientId }: { patientId: string }) {
       applicationIdentifier={process.env.NEXT_PUBLIC_NOVU_APP_IDENTIFIER || ""}
     >
       <PopoverNotificationCenter colorScheme={"light"}>
-        {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
+        {({ unseenCount }) => <CustomBellIcon unseenCount={unseenCount} />}
       </PopoverNotificationCenter>
     </NovuProvider>
   );
 }
+
+const CustomBellIcon = ({
+  unseenCount = 0,
+}: {
+  unseenCount: number | undefined;
+}) => {
+  return (
+    <CiBellOn
+      size={25}
+      color={unseenCount > 0 ? "red" : "black"}
+      style={{
+        cursor: "pointer",
+      }}
+    >
+      {unseenCount > 0 && (
+        <span
+          style={{
+            position: "absolute",
+            top: "50%",
+            right: "5px",
+            transform: "translateY(-50%)",
+            fontSize: "12px",
+            color: "white",
+            backgroundColor: "red",
+            borderRadius: "50%",
+            padding: "2px",
+          }}
+        >
+          {unseenCount}
+        </span>
+      )}
+    </CiBellOn>
+  );
+};