feat: Extracted headbar and notification components for reusability

- Created a HeadbarProps type that accepts a user prop of type Patient | Receptionist and a 
ole prop of type string
- Moved the Headbar and Notifications components to the components folder to make them reusable
- Updated the PatientLayout component to pass the necessary user and role props to the Headbar
- This change ensures that the headbar and notification components can be used across different user types (Patient, Receptionist, etc.) without the need for duplicating code

app/components/Headbar/index.tsx

@@ -0,0 +1,60 @@
+import Link from "next/link";
+import { Button, Divider, User } from "@nextui-org/react";
+import { CiLogin } from "react-icons/ci";
+import { GoPlus } from "react-icons/go";
+import { User as UserType } from "@/types";
+import { logoutAction } from "@lib/actions";
+import { Notifications } from "@components/index";
+
+type HeadbarProps = {
+  user: UserType;
+  role: string;
+};
+
+export default async function Headbar({ user, role }: HeadbarProps) {
+  return (
+    <div className="bg-[#f3f6fd] p-4 flex flex-row justify-between">
+      <div className="flex items-center w-3/5">
+        <p className="hidden ml-2 md:-ml-2 text-sm md:flex md:text-lg font-semibold tracking-wider">
+          Patient Fitness Tracker
+        </p>
+      </div>
+
+      <div className="flex justify-center items-center gap-2">
+        <Button
+          as={Link}
+          isIconOnly
+          radius="full"
+          variant="shadow"
+          size="sm"
+          className=""
+          href={`/${role}/appointments`}
+        >
+          <GoPlus size={20} />
+        </Button>
+
+        <Notifications userId={user._id} />
+
+        <User
+          name={user.firstname}
+          avatarProps={{
+            src: user.profile,
+          }}
+          className=""
+          description={
+            <Link
+              href={`/${role}/settings`}
+              className="text-xs text-danger"
+            >{`@${user.username}`}</Link>
+          }
+        />
+
+        <form action={logoutAction} className="">
+          <Button size="sm" type="submit" isIconOnly className="bg-transparent">
+            <CiLogin size={25} />
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+}

app/components/Notifications/index.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { CiBellOn } from "react-icons/ci";
+import {
+  NovuProvider,
+  PopoverNotificationCenter,
+} from "@novu/notification-center";
+
+export default function Notifications({ userId }: { userId: string }) {
+  return (
+    <NovuProvider
+      subscriberId={userId}
+      applicationIdentifier={process.env.NEXT_PUBLIC_NOVU_APP_IDENTIFIER || ""}
+    >
+      <PopoverNotificationCenter colorScheme={"light"}>
+        {({ 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>
+  );
+};

app/components/index.tsx

@@ -1,7 +1,17 @@
 import BrandLogo from "./brandlogo";
 import Carousel from "./carousel";
 import ErrorBoundary from "./error-boundary";
+import Headbar from "./Headbar";
+import Notifications from "./Notifications";
 import OtpSection from "./otp";
 import SpinnerLoader from "./SpinnerLoader";
 
-export { BrandLogo, Carousel, ErrorBoundary, OtpSection, SpinnerLoader };
+export {
+  BrandLogo,
+  Carousel,
+  ErrorBoundary,
+  Headbar,
+  Notifications,
+  OtpSection,
+  SpinnerLoader,
+};