chore: add avatar next to organization name

jaaydenh · jaaydenh · commit 69cce6b1e708 · 2024-12-18T22:21:50.000Z
diff --git a/site/src/components/Breadcrumb/Breadcrumb.tsx b/site/src/components/Breadcrumb/Breadcrumb.tsx
@@ -76,7 +76,7 @@ export const BreadcrumbPage = forwardRef<
 	<span
 		ref={ref}
 		aria-current="page"
-		className={cn("text-content-secondary", className)}
+		className={cn("flex items-center gap-2 text-content-secondary", className)}
 		{...props}
 	/>
 ));
diff --git a/site/src/modules/management/OrganizationSettingsLayout.tsx b/site/src/modules/management/OrganizationSettingsLayout.tsx
@@ -14,6 +14,7 @@ import { useDashboard } from "modules/dashboard/useDashboard";
 import { type FC, Suspense, createContext, useContext } from "react";
 import { Outlet, useParams } from "react-router-dom";
 import { OrganizationSidebar } from "./OrganizationSidebar";
+import { UserAvatar } from "components/UserAvatar/UserAvatar";
 
 export const OrganizationSettingsContext = createContext<
 	OrganizationSettingsValue | undefined
@@ -89,6 +90,12 @@ const OrganizationSettingsLayout: FC = () => {
 									<BreadcrumbSeparator />
 									<BreadcrumbItem>
 										<BreadcrumbPage className="text-content-primary">
+											<UserAvatar
+												key={organization.id}
+												size="xs"
+												username={organization.display_name}
+												avatarURL={organization.icon}
+											/>
 											{organization?.name}
 										</BreadcrumbPage>
 									</BreadcrumbItem>
