83 lines
2.4 KiB
TypeScript
83 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { usePathname } from "next/navigation";
|
|
import { Anchor, Badge, Breadcrumbs, Text } from "@mantine/core";
|
|
import { IconHomeFilled } from "@tabler/icons-react";
|
|
|
|
import type { TranslationKeys } from "@homarr/translation";
|
|
import { useScopedI18n } from "@homarr/translation/client";
|
|
|
|
interface DynamicBreadcrumbProps {
|
|
customHome?: string | null;
|
|
customHomeLink?: string;
|
|
dynamicMappings?: Map<string, string>;
|
|
nonInteractable?: string[];
|
|
}
|
|
|
|
/**
|
|
* Breadcrumb is client side rendered. Elements are automatically
|
|
* calculated and translated using dynamic keys.
|
|
* For dynamic routes (e.g. UIDs, names , ...),
|
|
* you can pass dynamic mappings to define their values
|
|
* in your parent component.
|
|
* @constructor
|
|
*/
|
|
export const DynamicBreadcrumb = ({
|
|
dynamicMappings,
|
|
customHome = "manage",
|
|
customHomeLink = "/manage",
|
|
nonInteractable,
|
|
}: DynamicBreadcrumbProps) => {
|
|
const pathname = usePathname();
|
|
const pathnameParts = pathname.split("/").filter((part) => part.length > 0);
|
|
const t = useScopedI18n("navigationStructure");
|
|
const tNavbar = useScopedI18n("management.navbar.items");
|
|
|
|
const length = pathnameParts.filter((part) => part !== customHome).length;
|
|
|
|
if (length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Breadcrumbs w="100%" mb="md">
|
|
<Badge
|
|
styles={{ root: { cursor: "pointer" } }}
|
|
component={"a"}
|
|
href={customHomeLink}
|
|
leftSection={<IconHomeFilled size="1rem" />}
|
|
variant="default"
|
|
tt="initial"
|
|
h="auto"
|
|
>
|
|
<Text fw="bold">{tNavbar("home")}</Text>
|
|
</Badge>
|
|
{pathnameParts.map((pathnamePart, index) => {
|
|
if (pathnamePart === customHome) {
|
|
return null;
|
|
}
|
|
const href = `/${pathnameParts.slice(0, index + 1).join("/")}`;
|
|
const translationKey = `${pathnameParts.slice(0, index + 1).join(".")}`;
|
|
|
|
if (nonInteractable?.includes(pathnamePart)) {
|
|
return <Text key={href}>{t(`${translationKey}.label` as TranslationKeys)}</Text>;
|
|
}
|
|
|
|
if (dynamicMappings?.has(pathnamePart)) {
|
|
return (
|
|
<Anchor key={href} href={href}>
|
|
{dynamicMappings.get(pathnamePart)}
|
|
</Anchor>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Anchor key={href} href={href}>
|
|
{t(`${translationKey}.label` as TranslationKeys)}
|
|
</Anchor>
|
|
);
|
|
})}
|
|
</Breadcrumbs>
|
|
);
|
|
};
|