inspect path by breadcrumbs

components/breadcrumbs.tsx

@@ -1,14 +1,20 @@
 import { useContext } from 'react'
+import { useRouter } from 'next/router'
 import Link from 'next/link'
 import UserContext from './user/context'
 
-export default function Breadcrumbs({ label }: { label: string }) {
+export default function Breadcrumbs() {
   const { username, role } = useContext(UserContext)
+  const router = useRouter()
 
-  if (!label) {
+  const breadcrumbs = router.asPath.replace(/^\//, '').split('/')
+
+  if (!breadcrumbs.length) {
     return null
   }
 
+  // TODO: translate routes
+  // TODO: make entries linkable
   return (
     <div className="flex flex-row items-center px-3 py-1 text-white text-base bg-blue-400 rounded-b-sm">
       {role === 'admin' && (
@@ -22,10 +28,16 @@ export default function Breadcrumbs({ label }: { label: string }) {
             <a className="font-extrabold">Home</a>
           </Link>
         </h2>
-        {'>'}
-        <h2 className="mx-1 flex-grow">
-          <span className="font-extrabold">{label}</span>
-        </h2>
+        {breadcrumbs.map((breadcrumb) => {
+          return (
+            <>
+              {'>'}
+              <h2 className="mx-1">
+                <span className="font-extrabold">{breadcrumb}</span>
+              </h2>
+            </>
+          )
+        })}
       </>
     </div>
   )