49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
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'
|
|
? () => null // Render nothing in production
|
|
: React.lazy(() =>
|
|
// Lazy load in development
|
|
import('@tanstack/router-devtools').then(res => ({
|
|
default: res.TanStackRouterDevtools
|
|
// For Embedded Mode
|
|
// default: res.TanStackRouterDevtoolsPanel
|
|
}))
|
|
);
|
|
|
|
export const Route = createRootRoute({
|
|
component: () => {
|
|
const { isAuthenticated, logout } = useAuth();
|
|
return (
|
|
<Stack padding={3}>
|
|
<Stack flexDirection={'row'} justifyContent={'space-between'}>
|
|
<Link to="/">
|
|
<Button>Home</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>
|
|
);
|
|
}
|
|
});
|