extract breadcrumbs

components/breadcrumbs.tsx

@@ -0,0 +1,32 @@
+import { useContext } from 'react'
+import Link from 'next/link'
+import UserContext from './user/context'
+
+export default function Breadcrumbs({ label }: { label: string }) {
+  const { username, role } = useContext(UserContext)
+
+  if (!label) {
+    return null
+  }
+
+  return (
+    <div className="flex flex-row items-center px-3 py-1 text-white text-base bg-blue-400 rounded-b-sm">
+      {role === 'admin' && (
+        <div className="font-extrabold bg-red-400 px-2 py-1 mr-3 rounded-sm">
+          {username}
+        </div>
+      )}
+      <>
+        <h2 className="mr-1">
+          <Link href="/">
+            <a className="font-extrabold">Home</a>
+          </Link>
+        </h2>
+        {'>'}
+        <h2 className="mx-1 flex-grow">
+          <span className="font-extrabold">{label}</span>
+        </h2>
+      </>
+    </div>
+  )
+}