44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbSeparator,
|
|
} from '@workspace/ui/components/ui/breadcrumb';
|
|
import { cn } from '@workspace/ui/lib/utils';
|
|
|
|
export const DocsBreadcrumb = ({ slug }: { slug?: string[] }) => {
|
|
return (
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
|
|
{slug &&
|
|
slug.length > 0 &&
|
|
slug.map((item, index) => (
|
|
<React.Fragment key={item}>
|
|
<BreadcrumbSeparator />
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink
|
|
className={cn(
|
|
'capitalize',
|
|
index === slug.length - 1 && 'text-foreground',
|
|
)}
|
|
href={
|
|
index === slug.length - 1 ? `/docs/${slug.join('/')}` : `#`
|
|
}
|
|
>
|
|
{item.replace(/-/g, ' ')}
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
</React.Fragment>
|
|
))}
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
);
|
|
};
|