added log out

app/client/pages/__root.tsx

@@ -1,6 +1,7 @@
 import { Button, Stack } from '@chakra-ui/react';
 import { createRootRoute, Link, Outlet } from '@tanstack/react-router';
 import React from 'react';
+import { useAuth } from '../hooks/auth';
 
 const TanStackRouterDevtools =
   process.env.NODE_ENV === 'production'
@@ -15,25 +16,34 @@ const TanStackRouterDevtools =
       );
 
 export const Route = createRootRoute({
-  component: () => (
-    <Stack padding={3}>
-      <Stack flexDirection={'row'} justifyContent={'space-between'}>
-        <Link to="/">
-          <Button>Home</Button>
-        </Link>
+  component: () => {
+    const { isAuthenticated, logout } = useAuth();
+    return (
+      <Stack padding={3}>
+        <Stack flexDirection={'row'} justifyContent={'space-between'}>
+          <Link to="/">
+            <Button>Home</Button>
+          </Link>
 
-        <Stack flexDirection={'row'}>
-          <Link to="/login">
-            <Button>Sign in</Button>
-          </Link>
-          <Link to="/register">
-            <Button>Sign up</Button>
-          </Link>
+          <Stack flexDirection={'row'}>
+            {!isAuthenticated ? (
+              <>
+                <Link to="/login">
+                  <Button>Sign in</Button>
+                </Link>
+                <Link to="/register">
+                  <Button>Sign up</Button>
+                </Link>
+              </>
+            ) : (
+              <Button onClick={async () => logout()}>Log out</Button>
+            )}
+          </Stack>
         </Stack>
+        <hr style={{ padding: '4px' }} />
+        <Outlet />
+        <TanStackRouterDevtools />
       </Stack>
-      <hr style={{ padding: '4px' }} />
-      <Outlet />
-      <TanStackRouterDevtools />
-    </Stack>
-  )
+    );
+  }
 });