40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import { ChevronRight } from 'lucide-react';
|
|
import React from 'react';
|
|
import { Box } from './Box';
|
|
import { Icon } from './Icon';
|
|
import { Link } from './Link';
|
|
import { Text } from './Text';
|
|
|
|
export interface BreadcrumbItem {
|
|
label: string;
|
|
href?: string;
|
|
}
|
|
|
|
export interface BreadcrumbsProps {
|
|
items: BreadcrumbItem[];
|
|
}
|
|
|
|
export const Breadcrumbs = ({ items }: BreadcrumbsProps) => {
|
|
return (
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
{items.map((item, index) => {
|
|
const isLast = index === items.length - 1;
|
|
return (
|
|
<React.Fragment key={index}>
|
|
{index > 0 && <Icon icon={ChevronRight} size={3} intent="low" />}
|
|
{isLast || !item.href ? (
|
|
<Text size="sm" variant={isLast ? 'high' : 'low'} weight={isLast ? 'bold' : 'normal'}>
|
|
{item.label}
|
|
</Text>
|
|
) : (
|
|
<Link href={item.href} variant="secondary">
|
|
<Text size="sm">{item.label}</Text>
|
|
</Link>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</Box>
|
|
);
|
|
};
|