43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
'use client';
|
|
import { useBreadcrumbs } from '@/hooks/use-breadcrumbs';
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator,
|
|
} from '@repo/shadcn/breadcrumb';
|
|
import { Slash } from 'lucide-react';
|
|
import { Fragment } from 'react';
|
|
|
|
export function Breadcrumbs() {
|
|
const items = useBreadcrumbs();
|
|
if (items.length === 0) return null;
|
|
return (
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
{items.map((item, index) => (
|
|
<Fragment key={item.title}>
|
|
{index !== items.length - 1 && (
|
|
<BreadcrumbItem className="hidden md:block">
|
|
<BreadcrumbLink href={item.link}>{item.title}</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
)}
|
|
{index < items.length - 1 && (
|
|
<BreadcrumbSeparator className="hidden md:block">
|
|
<Slash />
|
|
</BreadcrumbSeparator>
|
|
)}
|
|
{index === items.length - 1 && (
|
|
<BreadcrumbItem>
|
|
<BreadcrumbPage>{item.title}</BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
)}
|
|
</Fragment>
|
|
))}
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
);
|
|
}
|