43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import Link from "next/link";
|
|
import { IoChevronForward } from "react-icons/io5";
|
|
|
|
const BASE_URL = "https://trptk.com";
|
|
|
|
type Crumb = { label: string; href: string };
|
|
|
|
export function Breadcrumb({ crumbs }: { crumbs: Crumb[] }) {
|
|
if (crumbs.length === 0) return null;
|
|
|
|
const jsonLd = {
|
|
"@context": "https://schema.org",
|
|
"@type": "BreadcrumbList",
|
|
itemListElement: crumbs.map((crumb, i) => ({
|
|
"@type": "ListItem",
|
|
position: i + 1,
|
|
name: crumb.label,
|
|
item: `${BASE_URL}${crumb.href}`,
|
|
})),
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c") }}
|
|
/>
|
|
<nav className="mb-2 flex items-center gap-1 text-xs text-lightsec dark:text-darksec">
|
|
{crumbs.map((crumb, i) => (
|
|
<span key={crumb.href} className="flex items-center gap-1">
|
|
{i > 0 && <IoChevronForward className="opacity-50" />}
|
|
<Link
|
|
href={crumb.href}
|
|
className="transition-colors duration-200 hover:text-trptkblue dark:hover:text-white"
|
|
>
|
|
{crumb.label}
|
|
</Link>
|
|
</span>
|
|
))}
|
|
</nav>
|
|
</>
|
|
);
|
|
}
|