82 lines
3.2 KiB
TypeScript
82 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { ChevronRight, Home } from 'lucide-react';
|
|
|
|
interface BreadcrumbItem {
|
|
name: string;
|
|
url: string;
|
|
}
|
|
|
|
interface BreadcrumbSchemaProps {
|
|
items: BreadcrumbItem[];
|
|
showUI?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Generates JSON-LD BreadcrumbList schema for SEO
|
|
* Optionally renders visible breadcrumb navigation
|
|
*/
|
|
export function BreadcrumbSchema({ items, showUI = false }: BreadcrumbSchemaProps) {
|
|
const breadcrumbSchema = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'BreadcrumbList',
|
|
itemListElement: items.map((item, index) => ({
|
|
'@type': 'ListItem',
|
|
position: index + 1,
|
|
name: item.name,
|
|
item: item.url,
|
|
})),
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
|
|
/>
|
|
{showUI && (
|
|
<nav aria-label="Breadcrumb" className="bg-white/95 backdrop-blur-sm border-b border-slate-200">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<ol className="flex items-center gap-1 py-3 text-sm">
|
|
{items.map((item, index) => (
|
|
<li key={item.url} className="flex items-center">
|
|
{index > 0 && (
|
|
<ChevronRight className="w-4 h-4 text-slate-400 mx-1" />
|
|
)}
|
|
{index === items.length - 1 ? (
|
|
<span className="text-slate-600 font-medium truncate max-w-[200px]">
|
|
{item.name}
|
|
</span>
|
|
) : (
|
|
<Link
|
|
href={item.url.replace('https://qrmaster.io', '')}
|
|
className="text-slate-500 hover:text-indigo-600 transition-colors flex items-center gap-1"
|
|
>
|
|
{index === 0 && <Home className="w-4 h-4" />}
|
|
<span className="hidden sm:inline">{item.name}</span>
|
|
</Link>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
</nav>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Pre-configured breadcrumb for tool pages
|
|
* Renders: Home > Free QR Code Tools > [Tool Name]
|
|
*/
|
|
export function ToolBreadcrumb({ toolName, toolSlug }: { toolName: string; toolSlug: string }) {
|
|
const items: BreadcrumbItem[] = [
|
|
{ name: 'Home', url: 'https://www.qrmaster.net/' },
|
|
{ name: 'Free QR Code Tools', url: 'https://www.qrmaster.net/tools' },
|
|
{ name: toolName, url: `https://www.qrmaster.net/tools/${toolSlug}` },
|
|
];
|
|
|
|
return <BreadcrumbSchema items={items} showUI={true} />;
|
|
}
|