init project
This commit is contained in:
@@ -0,0 +1,39 @@
|
||||
import { ActionLink } from '@/components/actions/ActionLink';
|
||||
import { Icon } from '@/components/foundation/Icon';
|
||||
import styles from './Breadcrumbs.module.css';
|
||||
|
||||
export interface BreadcrumbItem {
|
||||
label: string;
|
||||
href?: string;
|
||||
}
|
||||
|
||||
export function Breadcrumbs({ label, items }: { label: string; items: BreadcrumbItem[] }) {
|
||||
return (
|
||||
<nav aria-label={label} className={styles.nav}>
|
||||
<ol>
|
||||
{items.map((item, index) => {
|
||||
const current = index === items.length - 1;
|
||||
return (
|
||||
<li key={`${item.label}-${index}`}>
|
||||
{index > 0 ? (
|
||||
<Icon
|
||||
name="chevron-forward"
|
||||
size="sm"
|
||||
directionBehavior="mirror"
|
||||
className={styles.separator}
|
||||
/>
|
||||
) : null}
|
||||
{item.href && !current ? (
|
||||
<ActionLink href={item.href} variant="inline">
|
||||
{item.label}
|
||||
</ActionLink>
|
||||
) : (
|
||||
<span aria-current={current ? 'page' : undefined}>{item.label}</span>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user