pfadi-bussle/components/user.tsx

import { useRouter } from 'next/router'
import { useContext } from 'react'

import UserContext from '../context/user'
import fetch from '../helpers/fetch'

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

  if (!username || !role) {
    return <div />
  }

  const onClickLogout = async () => {
    await fetch('/api/logout', { method: 'POST' })
    router.reload()
  }

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