Added login flow

client/components/nav/NavBar.tsx

@@ -1,11 +1,19 @@
-import { UserIcon } from "@heroicons/react/24/outline"
+import {
+  ArrowRightIcon,
+  ArrowRightOnRectangleIcon,
+  UserIcon,
+} from "@heroicons/react/24/outline"
 import { FC, useState } from "react"
+import { useLogout } from "../../hooks/useLogout"
+import useSession from "../../hooks/useSession"
 
 import Button from "../common/Button"
 import Logo from "../common/Logo"
 import LoginModal, { LoginModelProps } from "../login/LoginModal"
 
 const NavBar: FC = () => {
+  const logout = useLogout()
+  const session = useSession((state) => state.session)
   const [modalProps, setModalProps] = useState<LoginModelProps>({
     isOpen: false,
     defaultPage: 0,
@@ -23,6 +31,7 @@ const NavBar: FC = () => {
       isOpen: true,
     })
 
+  console.log({ session })
   return (
     <nav className="bg-zinc-800 w-screen font-semibold border-b border-b-black">
       <div className="flex flex-row justify-between items-center h-12 mx-2">
@@ -35,27 +44,41 @@ const NavBar: FC = () => {
         </div>
         <div>
           <ul className="justify-end flex flex-row space-x-3 items-center">
-            <li>
-              <Button
-                className="text-sm px-3 py-2 bg-neutral-700"
-                onClick={showLoginTab}
-              >
-                Log In
-              </Button>
-            </li>
-            <li>
-              <Button
-                className="text-sm px-3 py-2 bg-violet-500"
-                onClick={showSignupTab}
-              >
-                Sign Up
-              </Button>
-            </li>
-            <li>
-              <Button variant="subtle" className="p-[0.4rem]">
-                <UserIcon className="h-5 w-5 inline-block" />
-              </Button>
-            </li>
+            {session ? (
+              <>
+                <li>
+                  <UserIcon className="h-5 w-5 inline-block" />
+                </li>
+                <li>
+                  <Button
+                    variant="subtle"
+                    className="p-[0.4rem]"
+                    onClick={logout}
+                  >
+                    <ArrowRightOnRectangleIcon className="h-5 w-5 inline-block" />
+                  </Button>
+                </li>
+              </>
+            ) : (
+              <>
+                <li>
+                  <Button
+                    className="text-sm px-3 py-2 bg-neutral-700"
+                    onClick={showLoginTab}
+                  >
+                    Log In
+                  </Button>
+                </li>
+                <li>
+                  <Button
+                    className="text-sm px-3 py-2 bg-violet-500"
+                    onClick={showSignupTab}
+                  >
+                    Sign Up
+                  </Button>
+                </li>
+              </>
+            )}
           </ul>
         </div>
       </div>