Breadcrumb.

import Link from "next/link";
import { usePathname } from "next/navigation";
import { AppBreadcrumb, type BreadcrumbRoute } from "@/components/ui/app-breadcrumb";

type RouteData = { project: { name: string } };

const routes: BreadcrumbRoute<RouteData>[] = [
  { path: "/", label: "Home" },
  { path: "/projects", label: "Projects" },
  {
    path: "/projects/:projectId",
    label: ({ data }) => data?.project.name,
    fallbackLabel: "Project unavailable",
  },
];

export function Header({ project, isLoading }) {
  const pathname = usePathname();
  return (
    <AppBreadcrumb
      pathname={pathname}
      routes={routes}
      data={{ project }}
      loading={isLoading}
      maxVisibleItems={5}
      compactMaxVisibleItems={3}
      renderLink={({ href, children }) => <Link href={href}>{children}</Link>}
    />
  );
}

// A hierarchy that differs from URL nesting.
{ id: "project", path: "/projects/:projectId", label: projectLabel }
{ path: "/reports/:projectId/weekly", parentId: "project", label: "Weekly report" }

// Skip a level but keep its ancestors.
{ path: "/workspace", label: "Workspace", hidden: true }

// Start a new hierarchy; no URL ancestors are rendered.
{ path: "/admin", label: "Admin", parentId: null }

// Resolve without rendering, for a custom view.
const items = resolveBreadcrumbs({ pathname, routes, data });

// Layout: scope identifies the active route instance.
<BreadcrumbProvider scope={routeKey} pathname={pathname} routes={routes}>
  <header><ContextBreadcrumb /></header>
  {children}
</BreadcrumbProvider>

// A deeply nested page publishes a full trail, or only the labels it knows.
usePageBreadcrumbs({ scope: routeKey, routeLabels: { project: project.name } });
// Or: usePageBreadcrumbs({ scope: routeKey, items });