47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
|
'use client';
|
||
|
|
import Link from 'next/link';
|
||
|
|
import { FaHouse, FaAngleRight } from 'react-icons/fa6';
|
||
|
|
|
||
|
|
interface BreadcrumbItem {
|
||
|
|
name: string | undefined;
|
||
|
|
url: string | undefined;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Breadcrumb = ({ items }: { items: BreadcrumbItem[] }) => {
|
||
|
|
return (
|
||
|
|
<nav className="box-breadcrumb-global mb-4 text-sm text-gray-600">
|
||
|
|
<ol itemScope itemType="http://schema.org/BreadcrumbList" className="flex gap-2">
|
||
|
|
<li
|
||
|
|
itemProp="itemListElement"
|
||
|
|
itemScope
|
||
|
|
itemType="http://schema.org/ListItem"
|
||
|
|
className="flex items-center gap-2"
|
||
|
|
>
|
||
|
|
<Link href="/" itemProp="item">
|
||
|
|
<span itemProp="name" className="flex items-center gap-2">
|
||
|
|
<span style={{ fontSize: 0 }}>Trang chủ</span> <FaHouse className="text-gray-700" />
|
||
|
|
</span>
|
||
|
|
</Link>{' '}
|
||
|
|
<FaAngleRight className="text-gray-700" />
|
||
|
|
<meta itemProp="position" content="1" />
|
||
|
|
</li>
|
||
|
|
{items.map((item, idx) => (
|
||
|
|
<li
|
||
|
|
key={idx}
|
||
|
|
itemProp="itemListElement"
|
||
|
|
itemScope
|
||
|
|
itemType="http://schema.org/ListItem"
|
||
|
|
className="flex items-center"
|
||
|
|
>
|
||
|
|
<Link href={item.url ?? '/'} itemProp="item">
|
||
|
|
<span itemProp="name">{item?.name}</span>
|
||
|
|
</Link>
|
||
|
|
<meta itemProp="position" content={(idx + 1).toString()} />
|
||
|
|
{idx < items.length - 1 && <span className="mx-1">/</span>}
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ol>
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
};
|