import { useLocation, useParams } from "react-router"; export interface BreadcrumbItem { label: string; href?: string; isCurrentPage?: boolean; } /** * Generates breadcrumb items based on the current route * @param pathname - Current pathname from useLocation * @param params - Route parameters from useParams * @returns Array of breadcrumb items */ export function generateBreadcrumbs(pathname: string, params: Record): BreadcrumbItem[] { const breadcrumbs: BreadcrumbItem[] = []; if (pathname.startsWith("/repositories")) { breadcrumbs.push({ label: "Repositories", href: "/repositories", isCurrentPage: pathname === "/repositories", }); if (pathname.startsWith("/repositories/") && params.name) { const isSnapshotPage = !!params.snapshotId; breadcrumbs.push({ label: params.name, href: isSnapshotPage ? `/repositories/${params.name}` : undefined, isCurrentPage: !isSnapshotPage, }); if (isSnapshotPage && params.snapshotId) { breadcrumbs.push({ label: params.snapshotId, isCurrentPage: true, }); } } return breadcrumbs; } if (pathname.startsWith("/backups")) { breadcrumbs.push({ label: "Backups", href: "/backups", isCurrentPage: pathname === "/backups", }); if (pathname.startsWith("/backups/") && params.id) { breadcrumbs.push({ label: `Schedule #${params.id}`, isCurrentPage: true, }); } return breadcrumbs; } breadcrumbs.push({ label: "Volumes", href: "/volumes", isCurrentPage: pathname === "/volumes", }); if (pathname.startsWith("/volumes/") && params.name) { breadcrumbs.push({ label: params.name, isCurrentPage: true, }); } return breadcrumbs; } /** * Hook to get breadcrumb data for the current route */ export function useBreadcrumbs(): BreadcrumbItem[] { const location = useLocation(); const params = useParams(); return generateBreadcrumbs(location.pathname, params); }