first wokring prototype

src/layout/BreadcrumbBar.tsx

@@ -0,0 +1,69 @@
+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());
+}