pfadi-bussle/components/user.tsx

import { useContext } from 'react'

import UserContext from './user/context'

export default function User() {
  const { username, role } = useContext(UserContext)

  if (!username || !role) {
    return null
  }

  return (
    <div className="font-extrabold bg-red-400 px-2 py-1 mr-3 rounded-sm">
      {username}
    </div>
  )
}