SEO/AEO

src/components/Breadcrumbs.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Link from 'next/link';
+
+export interface BreadcrumbItem {
+  name: string;
+  url: string;
+}
+
+interface BreadcrumbsProps {
+  items: BreadcrumbItem[];
+}
+
+export default function Breadcrumbs({ items }: BreadcrumbsProps) {
+  return (
+    <nav aria-label="Breadcrumb" className="mb-6">
+      <ol className="flex items-center space-x-2 text-sm text-gray-600">
+        {items.map((item, index) => (
+          <li key={item.url} className="flex items-center">
+            {index > 0 && <span className="mx-2">/</span>}
+            {index === items.length - 1 ? (
+              <span className="font-semibold text-gray-900" aria-current="page">
+                {item.name}
+              </span>
+            ) : (
+              <Link href={item.url} className="hover:text-blue-600 transition-colors">
+                {item.name}
+              </Link>
+            )}
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}
+
+export { type BreadcrumbItem as BreadcrumbItemType };