42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
// components/dynamic-breadcrumb.tsx
|
|
'use client';
|
|
|
|
import {usePathname} from 'next/navigation';
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator,
|
|
} from "@/components/ui/breadcrumb";
|
|
import React from 'react';
|
|
import {getBreadcrumbs} from "@/utils/BreadcrumbUtils";
|
|
|
|
export function DynamicBreadcrumb() {
|
|
const pathname = usePathname();
|
|
const breadcrumbs = getBreadcrumbs(pathname);
|
|
|
|
return (
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
{breadcrumbs.map((breadcrumb, index) => (
|
|
<React.Fragment key={breadcrumb.href}>
|
|
<BreadcrumbItem className="hidden md:block">
|
|
{breadcrumb.isCurrentPage ? (
|
|
<BreadcrumbPage>{breadcrumb.label}</BreadcrumbPage>
|
|
) : (
|
|
<BreadcrumbLink href={breadcrumb.href}>
|
|
{breadcrumb.label}
|
|
</BreadcrumbLink>
|
|
)}
|
|
</BreadcrumbItem>
|
|
{index < breadcrumbs.length - 1 && (
|
|
<BreadcrumbSeparator className="hidden md:block"/>
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
);
|
|
} |