70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { ChevronRight } from "lucide-react";
|
|
|
|
export default function BreadcrumbBar({ pathname }: { pathname: string }) {
|
|
const parts = pathname.split("/").filter(Boolean);
|
|
const labels = parts.length ? parts : ["campaigns"];
|
|
|
|
return (
|
|
<div className="breadcrumb-bar">
|
|
<nav className="breadcrumbs" aria-label="Breadcrumb">
|
|
{labels.map((part, index) => {
|
|
const href = `/${labels.slice(0, index + 1).join("/")}`;
|
|
return (
|
|
<span className="crumb" key={`${part}-${index}`}>
|
|
<Link className="crumb-link" to={href}>{labelFor(part, labels, index)}</Link>
|
|
{index < labels.length - 1 && <ChevronRight size={16} aria-hidden="true" />}
|
|
</span>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const campaignRouteLabels: Record<string, string> = {
|
|
data: "General",
|
|
campaign: "General",
|
|
settings: "Global settings",
|
|
"global-settings": "Global settings",
|
|
fields: "Fields",
|
|
recipients: "Recipients",
|
|
template: "Template",
|
|
files: "Attachments",
|
|
attachments: "Attachments",
|
|
mail: "Server settings",
|
|
"mail-settings": "Server settings",
|
|
"server-settings": "Server settings",
|
|
review: "Review",
|
|
send: "Send",
|
|
report: "Report",
|
|
reports: "Report",
|
|
audit: "Audit log",
|
|
json: "JSON",
|
|
wizard: "Wizard",
|
|
create: "Create",
|
|
};
|
|
|
|
const topLevelRouteLabels: Record<string, string> = {
|
|
campaigns: "Campaigns",
|
|
dashboard: "Dashboard",
|
|
templates: "Templates",
|
|
files: "Files",
|
|
reports: "Reports",
|
|
settings: "Settings",
|
|
admin: "Admin",
|
|
};
|
|
|
|
function labelFor(value: string, parts: string[], index: number): string {
|
|
if (parts[0] === "campaigns" && index === 1) return "Campaign";
|
|
if (parts[0] === "campaigns" && index >= 2) {
|
|
const mapped = campaignRouteLabels[value];
|
|
if (mapped) return mapped;
|
|
}
|
|
|
|
const mapped = topLevelRouteLabels[value];
|
|
if (mapped) return mapped;
|
|
if (value.length > 18) return "Campaign";
|
|
return value.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
|
|
}
|