move login and add logout

components/user.tsx

@@ -1,17 +1,30 @@
+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>
+    <>
+      <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>
+    </>
   )
 }