43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
import { breadcrumbListJsonLd, JsonLdScript } from '#web-runtime/lib/structured-data';
|
|
import type { Breadcrumb } from '#web-runtime/types';
|
|
import { toPublicHref } from '#i18n/content-href';
|
|
|
|
export default function Breadcrumbs({ items }: { items: Breadcrumb[] }) {
|
|
if (items.length <= 1) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<nav aria-label="Breadcrumb" className="border-b border-[#d6d7cf]">
|
|
<ol className="mx-auto flex w-[min(calc(100%-2rem),76rem)] flex-wrap items-center gap-x-2 gap-y-1 py-3.5 font-mono text-xs font-medium tracking-[0.02em] text-[#5d675f] max-[45rem]:w-[min(calc(100%-1.25rem),76rem)]">
|
|
{items.map((item, index) => {
|
|
const isLast = index === items.length - 1;
|
|
|
|
return (
|
|
<li key={`${item.href}-${index}`} className="flex items-center gap-2">
|
|
{index > 0 ? (
|
|
<span aria-hidden="true" className="text-[#aab4aa]">
|
|
/
|
|
</span>
|
|
) : null}
|
|
{isLast ? (
|
|
<span aria-current="page" className="text-[#172019]">
|
|
{item.label}
|
|
</span>
|
|
) : (
|
|
<a
|
|
href={toPublicHref(item.href)}
|
|
className="rounded-sm underline-offset-4 transition-colors hover:text-[#172019] hover:underline focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#99d900]"
|
|
>
|
|
{item.label}
|
|
</a>
|
|
)}
|
|
</li>
|
|
);
|
|
})}
|
|
</ol>
|
|
<JsonLdScript data={breadcrumbListJsonLd(items)} />
|
|
</nav>
|
|
);
|
|
}
|