Added custom bell icon for novu notification center

ad956 · Jun 7, 2024 · 729ac65 · 729ac65
1 parent d755304
commit 729ac65
Showing 1 changed file with 36 additions and 2 deletions.
diff --git 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>
+  );
+};