53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
interface BreadcrumbItem {
|
|
label: string;
|
|
to?: string;
|
|
}
|
|
|
|
interface BreadcrumbProps {
|
|
items: BreadcrumbItem[];
|
|
}
|
|
|
|
const Breadcrumb: React.FC<BreadcrumbProps> = ({ items }) => {
|
|
const breadcrumbSchema = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'BreadcrumbList',
|
|
itemListElement: items.map((item, index) => ({
|
|
'@type': 'ListItem',
|
|
position: index + 1,
|
|
name: item.label,
|
|
...(item.to ? { item: `https://bayareait.services${item.to}` } : {}),
|
|
})),
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<nav aria-label="breadcrumb" className="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1.5">
|
|
{items.map((item, i) => (
|
|
<React.Fragment key={i}>
|
|
{i > 0 && <span className="text-gray-400 dark:text-gray-600">/</span>}
|
|
{item.to ? (
|
|
<Link
|
|
to={item.to}
|
|
className="hover:text-gray-900 dark:hover:text-white transition-colors"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
) : (
|
|
<span className="text-gray-900 dark:text-white font-medium">{item.label}</span>
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</nav>
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Breadcrumb;
|