63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator,
|
|
} from '@/components/ui/breadcrumb';
|
|
|
|
export function BreadcrumbBasic() {
|
|
const pathname = usePathname();
|
|
const segments = pathname.split('/').filter((segment) => segment !== '');
|
|
|
|
// Helper to format segment (e.g., "upload-history" -> "Upload History")
|
|
const formatSegment = (segment: string) => {
|
|
return segment
|
|
.split('-')
|
|
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
|
.join(' ');
|
|
};
|
|
|
|
return (
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink asChild>
|
|
<Link href="/">Home</Link>
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
{segments.length > 0 && <BreadcrumbSeparator />}
|
|
|
|
{segments.map((segment, index) => {
|
|
const href = `/${segments.slice(0, index + 1).join('/')}`;
|
|
const isLast = index === segments.length - 1;
|
|
|
|
// Skip segments that represent module groups or generic IDs if needed
|
|
// For now, mapping all segments
|
|
|
|
return (
|
|
<React.Fragment key={href}>
|
|
<BreadcrumbItem>
|
|
{isLast ? (
|
|
<BreadcrumbPage>{formatSegment(segment)}</BreadcrumbPage>
|
|
) : (
|
|
<BreadcrumbLink asChild>
|
|
<Link href={href}>{formatSegment(segment)}</Link>
|
|
</BreadcrumbLink>
|
|
)}
|
|
</BreadcrumbItem>
|
|
{!isLast && <BreadcrumbSeparator />}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
);
|
|
}
|