pfadi-bussle/components/breadcrumbs.tsx

import { useContext } from 'react'
import { useRouter } from 'next/router'
import Link from 'next/link'
import UserContext from './user/context'

export default function Breadcrumbs() {
  const { username, role } = useContext(UserContext)
  const router = useRouter()

  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' && (
        <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>
        {breadcrumbs.map((breadcrumb) => {
          return (
            <>
              {'>'}
              <h2 className="mx-1">
                <span className="font-extrabold">{breadcrumb}</span>
              </h2>
            </>
          )
        })}
      </>
    </div>
  )
}