pfadi-bussle/components/breadcrumbs.tsx

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>
  )
}