1import {
2 WorkspaceBreadcrumb,
3 WorkspaceBreadcrumbItem,
4 WorkspaceBreadcrumbSeparator,
5} from "../WorkspaceBreadcrumb";
6import { SETTINGS_SECTION_LABELS } from "./settingsSearch";
7
8const SETTINGS_BREADCRUMB_LABELS: Readonly<Record<string, string>> = {
9 ...SETTINGS_SECTION_LABELS,
10 "/settings/diagnostics": "Diagnostics",
11 "/settings/open-source-licenses": "Open source licenses",
12};
13
14function settingsBreadcrumbLabel(pathname: string): string | null {
15 const normalizedPathname = pathname.replace(/\/+$/, "") || "/";
16 return SETTINGS_BREADCRUMB_LABELS[normalizedPathname] ?? null;
17}
18
19/**
20 * `Settings / Section`. The scope a change applies to lives at the top of the
21 * page content, see `SettingsScopeSentence`.
22 */
23export function SettingsBreadcrumb({ pathname }: { pathname: string }) {
24 const sectionLabel = settingsBreadcrumbLabel(pathname);
25
26 return (
27 <WorkspaceBreadcrumb ariaLabel="Settings breadcrumb">
28 {sectionLabel ? (
29 <>
30 <WorkspaceBreadcrumbItem>Settings</WorkspaceBreadcrumbItem>
31 <WorkspaceBreadcrumbSeparator />
32 </>
33 ) : null}
34 <WorkspaceBreadcrumbItem current className="truncate">
35 {sectionLabel ?? "Settings"}
36 </WorkspaceBreadcrumbItem>
37 </WorkspaceBreadcrumb>
38 );
39}