69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
import { Icon, Stack, Text } from '@chakra-ui/react';
|
|
import { createRootRouteWithContext, Link, Outlet } from '@tanstack/react-router';
|
|
import React from 'react';
|
|
import { Button } from '../components/ui/button';
|
|
import { Tooltip } from '../components/ui/tooltip';
|
|
import { useAuth } from '../hooks/auth';
|
|
import { appName } from '../main';
|
|
|
|
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
|
|
}))
|
|
);
|
|
|
|
interface RouterContext {
|
|
isAuthenticated: boolean;
|
|
}
|
|
|
|
export const Route = createRootRouteWithContext<RouterContext>()({
|
|
component: () => {
|
|
const { isAuthenticated, logout } = useAuth();
|
|
return (
|
|
<Stack padding={3}>
|
|
<Stack flexDirection="row" justifyContent="space-between" alignItems="center">
|
|
<Stack flexDirection="row" alignItems="center" gap={4}>
|
|
<Link to="/">
|
|
<Text color="colorPalette.500" fontSize="xl">
|
|
[{appName}]
|
|
</Text>
|
|
</Link>
|
|
<Link to="/about">
|
|
<Icon color="colorPalette.500" fontSize="md">
|
|
<i className="nf nf-oct-question" />
|
|
</Icon>
|
|
</Link>
|
|
</Stack>
|
|
|
|
<Stack flexDirection="row" alignItems="center">
|
|
{!isAuthenticated ? (
|
|
<>
|
|
<Link to="/login">
|
|
<Button>Sign in</Button>
|
|
</Link>
|
|
<Link to="/register">
|
|
<Button>Sign up</Button>
|
|
</Link>
|
|
</>
|
|
) : (
|
|
<Tooltip content="Log out">
|
|
<Icon color="colorPalette.500" fontSize="xl" onClick={async () => logout()}>
|
|
<i className="nf nf-fa-sign_out" />
|
|
</Icon>
|
|
</Tooltip>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
<hr style={{ padding: '4px' }} />
|
|
<Outlet />
|
|
<TanStackRouterDevtools />
|
|
</Stack>
|
|
);
|
|
}
|
|
});
|