80 lines
2.1 KiB
TypeScript
80 lines
2.1 KiB
TypeScript
import Link from "next/link"
|
|
import { ChevronRight, Home } from "lucide-react"
|
|
import { businessConfig } from "@/lib/seo-config"
|
|
|
|
interface BreadcrumbItem {
|
|
label: string
|
|
href: string
|
|
}
|
|
|
|
interface BreadcrumbsProps {
|
|
items: BreadcrumbItem[]
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* Breadcrumb Navigation Component
|
|
* Implements BreadcrumbList schema markup for SEO and navigation clarity
|
|
* Helps search engines understand page hierarchy
|
|
*/
|
|
export function Breadcrumbs({ items, className = "" }: BreadcrumbsProps) {
|
|
// Build breadcrumb list for schema
|
|
const breadcrumbList = {
|
|
"@context": "https://schema.org",
|
|
"@type": "BreadcrumbList",
|
|
itemListElement: [
|
|
{
|
|
"@type": "ListItem",
|
|
position: 1,
|
|
name: "Home",
|
|
item: businessConfig.website,
|
|
},
|
|
...items.map((item, index) => ({
|
|
"@type": "ListItem",
|
|
position: index + 2,
|
|
name: item.label,
|
|
item: item.href.startsWith("http")
|
|
? item.href
|
|
: `${businessConfig.website}${item.href}`,
|
|
})),
|
|
],
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbList) }}
|
|
/>
|
|
<nav
|
|
className={`flex items-center gap-2 text-sm text-muted-foreground ${className}`}
|
|
aria-label="Breadcrumb"
|
|
>
|
|
<Link
|
|
href="/"
|
|
className="hover:text-foreground transition-colors flex items-center gap-1"
|
|
aria-label="Home"
|
|
>
|
|
<Home className="h-4 w-4" />
|
|
</Link>
|
|
{items.map((item, index) => (
|
|
<div key={index} className="flex items-center gap-2">
|
|
<ChevronRight className="h-4 w-4" />
|
|
{index === items.length - 1 ? (
|
|
<span className="text-foreground font-medium" aria-current="page">
|
|
{item.label}
|
|
</span>
|
|
) : (
|
|
<Link
|
|
href={item.href}
|
|
className="hover:text-foreground transition-colors"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
</>
|
|
)
|
|
}
|