make one header component for the dashboard

src/app/(pages)/dashboard/org/status-pages/page.tsx

@@ -1,4 +1,9 @@
 import { ReactElement } from "react";
+import DashboardHeader from "@/components/dashboard/dashboard-header";
 
-const StatusPagesPage = (): ReactElement => <main>BOB?</main>;
+const StatusPagesPage = (): ReactElement => (
+    <main className="flex flex-col gap-3">
+        <DashboardHeader title="Status Pages" />
+    </main>
+);
 export default StatusPagesPage;

src/app/(pages)/dashboard/user/billing/page.tsx

@@ -2,7 +2,7 @@
 
 import { ReactElement } from "react";
 import { Separator } from "@/components/ui/separator";
-import UserSettingsHeader from "@/components/dashboard/user/user-settings-header";
+import DashboardHeader from "@/components/dashboard/dashboard-header";
 
 /**
  * The user billing page.
@@ -11,7 +11,7 @@ import UserSettingsHeader from "@/components/dashboard/user/user-settings-header
  */
 const UserBillingPage = (): ReactElement => (
     <main className="w-[47rem] flex flex-col gap-5">
-        <UserSettingsHeader title="Billing" />
+        <DashboardHeader title="Billing" />
 
         {/* Content */}
         <div className="flex flex-col gap-5">

src/app/(pages)/dashboard/user/profile/page.tsx

@@ -6,7 +6,7 @@ import AvatarSetting from "@/components/dashboard/user/profile/avatar-setting";
 import UsernameSetting from "@/components/dashboard/user/profile/username-setting";
 import EmailSetting from "@/components/dashboard/user/profile/email-setting";
 import TierSetting from "@/components/dashboard/user/profile/tier-setting";
-import UserSettingsHeader from "@/components/dashboard/user/user-settings-header";
+import DashboardHeader from "@/components/dashboard/dashboard-header";
 
 /**
  * The user profile page.
@@ -15,7 +15,7 @@ import UserSettingsHeader from "@/components/dashboard/user/user-settings-header
  */
 const UserProfilePage = (): ReactElement => (
     <main className="w-[47rem] flex flex-col gap-5">
-        <UserSettingsHeader title="My Profile" />
+        <DashboardHeader title="My Profile" />
 
         {/* Content */}
         <div className="flex flex-col gap-5">

src/app/(pages)/dashboard/user/settings/page.tsx

@@ -3,8 +3,8 @@
 import { ReactElement } from "react";
 import { Separator } from "@/components/ui/separator";
 import TFASetting from "@/components/dashboard/user/settings/tfa/tfa-setting";
-import UserSettingsHeader from "@/components/dashboard/user/user-settings-header";
 import DevicesSetting from "@/components/dashboard/user/settings/device/devices-setting";
+import DashboardHeader from "@/components/dashboard/dashboard-header";
 
 /**
  * The user settings page.
@@ -13,7 +13,7 @@ import DevicesSetting from "@/components/dashboard/user/settings/device/devices-
  */
 const UserSettingsPage = (): ReactElement => (
     <main className="w-[47rem] flex flex-col gap-5">
-        <UserSettingsHeader title="Settings" />
+        <DashboardHeader title="Settings" />
 
         {/* Content */}
         <div className="flex flex-col gap-5">

src/components/dashboard/dashboard-header.tsx

@@ -12,6 +12,19 @@ import {
     BreadcrumbPage,
     BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
+import { Organization } from "@/app/types/org/organization";
+import { useOrganizationContext } from "@/app/provider/organization-provider";
+import { OrganizationState } from "@/app/store/organization-store";
+import { usePathname } from "next/navigation";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import UserMenuLinks from "@/components/dashboard/sidebar/user-menu/user-menu-links";
+import OrganizationLogo from "@/components/org/organization-logo";
+import UserAvatar from "@/components/user/user-avatar";
 
 /**
  * The props for this header.
@@ -21,11 +34,6 @@ type DashboardHeaderProps = {
      * The title of this header.
      */
     title: string;
-
-    /**
-     * The breadcrumb of this header.
-     */
-    breadcrumb: ReactElement;
 };
 
 /**
@@ -35,13 +43,15 @@ type DashboardHeaderProps = {
  * @param props the header props
  * @return the header jsx
  */
-const DashboardHeader = ({
+const DashboardHeader = ({ title }: DashboardHeaderProps): ReactElement => {
-    title,
+    const path: string = usePathname();
-    breadcrumb,
+
-}: DashboardHeaderProps): ReactElement => {
     const user: User | undefined = useUserContext(
         (state: UserState) => state.user
     );
+    const selectedOrganization: Organization | undefined =
+        useOrganizationContext((state: OrganizationState) => state.selected);
+
     return (
         <div className="flex flex-col gap-1.5 select-none">
             <h1 className="text-2xl font-bold">{title}</h1>
@@ -54,7 +64,13 @@ const DashboardHeader = ({
                         </BreadcrumbLink>
                     </BreadcrumbItem>
                     <BreadcrumbSeparator />
-                    {breadcrumb}
+                    {path.startsWith("/dashboard/org") ? (
+                        <OrganizationBreadcrumb
+                            organization={selectedOrganization as Organization}
+                        />
+                    ) : (
+                        <UserBreadcrumb user={user as User} />
+                    )}
                     <BreadcrumbSeparator />
                     <BreadcrumbItem>
                         <BreadcrumbPage>{title}</BreadcrumbPage>
@@ -64,4 +80,31 @@ const DashboardHeader = ({
         </div>
     );
 };
+
+const UserBreadcrumb = ({ user }: { user: User }): ReactElement => (
+    <BreadcrumbItem>
+        <DropdownMenu>
+            <DropdownMenuTrigger className="flex gap-1.5 items-center">
+                <UserAvatar className="translate-y-0.5" user={user} size="sm" />
+                <span>@{user?.username}</span>
+                <ChevronDownIcon className="w-3 h-3" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+                <UserMenuLinks />
+            </DropdownMenuContent>
+        </DropdownMenu>
+    </BreadcrumbItem>
+);
+
+const OrganizationBreadcrumb = ({
+    organization,
+}: {
+    organization: Organization;
+}): ReactElement => (
+    <BreadcrumbItem className="gap-3">
+        <OrganizationLogo organization={organization} size="sm" />
+        <span>{organization.name}</span>
+    </BreadcrumbItem>
+);
+
 export default DashboardHeader;

src/components/dashboard/user/user-settings-header.tsx

@@ -1,64 +0,0 @@
-import { ReactElement } from "react";
-import { User } from "@/app/types/user/user";
-import { useUserContext } from "@/app/provider/user-provider";
-import { UserState } from "@/app/store/user-store";
-import {
-    Breadcrumb,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
-import UserMenuLinks from "@/components/dashboard/sidebar/user-menu/user-menu-links";
-
-/**
- * The header to display
- * on user settings pages.
- *
- * @param title the title of this header
- * @return the header jsx
- */
-const UserSettingsHeader = ({ title }: { title: string }): ReactElement => {
-    const user: User | undefined = useUserContext(
-        (state: UserState) => state.user
-    );
-    return (
-        <div className="flex flex-col gap-1.5 select-none">
-            <h1 className="text-2xl font-bold">{title}</h1>
-
-            <Breadcrumb>
-                <BreadcrumbList>
-                    <BreadcrumbItem>
-                        <BreadcrumbLink href="/dashboard" draggable={false}>
-                            Dashboard
-                        </BreadcrumbLink>
-                    </BreadcrumbItem>
-                    <BreadcrumbSeparator />
-                    <BreadcrumbItem>
-                        <DropdownMenu>
-                            <DropdownMenuTrigger className="flex gap-1.5 items-center">
-                                @{user?.username}
-                                <ChevronDownIcon className="w-3 h-3" />
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="start">
-                                <UserMenuLinks />
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                    </BreadcrumbItem>
-                    <BreadcrumbSeparator />
-                    <BreadcrumbItem>
-                        <BreadcrumbPage>{title}</BreadcrumbPage>
-                    </BreadcrumbItem>
-                </BreadcrumbList>
-            </Breadcrumb>
-        </div>
-    );
-};
-export default UserSettingsHeader;