🪛 04 breadcrumbs

app/@breadcrumbs/blog/[...slug]/page.tsx

@@ -0,0 +1,53 @@
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
+import { getPostBySlug } from '@/lib/markdown';
+
+interface BreadcrumbItem {
+  label: string;
+  href: string;
+  current?: boolean;
+}
+
+function formatDirectoryName(name: string): string {
+  const directoryNames: { [key: string]: string } = {
+    tech: 'Tehnologie',
+    design: 'Design',
+    tutorial: 'Tutoriale',
+  };
+
+  return directoryNames[name] || name.charAt(0).toUpperCase() + name.slice(1);
+}
+
+export default async function BlogPostBreadcrumb({
+  params,
+}: {
+  params: Promise<{ slug: string[] }>;
+}) {
+  const { slug } = await params;
+  const slugPath = slug.join('/');
+  const post = getPostBySlug(slugPath);
+
+  const items: BreadcrumbItem[] = [
+    {
+      label: 'Blog',
+      href: '/blog',
+    },
+  ];
+
+  if (slug.length > 1) {
+    for (let i = 0; i < slug.length - 1; i++) {
+      const segmentPath = slug.slice(0, i + 1).join('/');
+      items.push({
+        label: formatDirectoryName(slug[i]),
+        href: `/blog/${segmentPath}`,
+      });
+    }
+  }
+
+  items.push({
+    label: post ? post.frontmatter.title : slug[slug.length - 1],
+    href: `/blog/${slugPath}`,
+    current: true,
+  });
+
+  return <Breadcrumbs items={items} />;
+}