pfadi-bussle/components/header.tsx

import React, { useContext } from 'react'
import Link from 'next/link'
import UserContext from './user/context'
import Logo from './logo'

export default function Header({ label = 'Pfadi Bussle' }: { label?: string }) {
  const { username, role } = useContext(UserContext)
  return (
    <>
      <div className="flex flex-row items-center p-3 my-3 text-white bg-gray-400 rounded-sm">
        <h1 className="mr-3 flex-grow text-2xl">
          <Link href="/">
            <a className="text-indigo-600 font-extrabold">{label}</a>
          </Link>
        </h1>
        <Logo className="w-40 flex-shrink-0 text-white" />
      </div>
      {username && (
        <div className="info-message">
          FYI, you are logged in as <strong className="ml-1">{username}</strong>
        </div>
      )}
    </>
  )
}