add breadcrumbs

danieltott · danieltott · commit 18d821bfa3a7 · 2023-06-02T11:48:14.000-04:00
diff --git a/app/breadcrumbs.tsx b/app/breadcrumbs.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import Link from 'next/link';
+import { useSelectedLayoutSegments } from 'next/navigation';
+import { useMemo } from 'react';
+
+export default function BreadCrumbs() {
+  const segments = useSelectedLayoutSegments();
+
+  const crumbs = useMemo(() => {
+    let curPath = '/';
+
+    return [
+      {
+        name: 'Home',
+        href: curPath,
+        current: segments.length === 0,
+      },
+      ...segments
+        .filter(
+          (segment) => !segment.startsWith('(') && !segment.startsWith('[')
+        )
+        .map((segment, index) => {
+          curPath += segment;
+
+          return {
+            name: segment,
+            href: curPath,
+            current: index === segments.length - 1,
+          };
+        }),
+    ];
+  }, [segments]);
+
+  console.log(segments);
+
+  return (
+    <nav className="flex mb-8 justify-end" aria-label="Breadcrumb">
+      <ol role="list" className="flex items-center space-x-4">
+        {crumbs.map((page, index) => (
+          <li key={page.name}>
+            <div className="flex items-center">
+              {index !== 0 && (
+                <svg
+                  className="h-5 w-5 flex-shrink-0 text-gray-300"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  aria-hidden="true"
+                >
+                  <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
+                </svg>
+              )}
+              <Link
+                href={page.href}
+                className={`ml-4 text-sm font-medium ${
+                  page.current
+                    ? 'text-sky-700 hover:text-sky-800 drop-shadow-sm'
+                    : 'text-gray-500 hover:text-gray-700'
+                }`}
+                aria-current={page.current ? 'page' : undefined}
+              >
+                {page.name}
+              </Link>
+            </div>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import './globals.css';
 import { Inter } from 'next/font/google';
+import BreadCrumbs from './breadcrumbs';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -21,7 +22,7 @@ export default function RootLayout({
     <html lang="en">
       <body className={inter.className}>
         <div className="container p-4 mx-auto">
-          <header className="md:flex md:items-center md:justify-between mb-8">
+          <header className="md:flex md:items-center md:justify-between mb-2">
             <div className="min-w-0 flex-1">
               <h1 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
                 Next.js App Router Example
@@ -31,6 +32,7 @@ export default function RootLayout({
               {new Date().toLocaleTimeString()}
             </div>
           </header>
+          <BreadCrumbs />
           {children}
           <footer className="mt-8 border-t border-t-sky-500 pt-8">
             <nav className="prose">
