update

src/components/common/Breadcrumb.tsx

@@ -0,0 +1,46 @@
+'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>
+  );
+};