110 lines
3.7 KiB
TypeScript
110 lines
3.7 KiB
TypeScript
import { Separator, Icon, Menu, Stack, Text } from '@chakra-ui/react';
|
|
import { createRootRouteWithContext, Link, Outlet } from '@tanstack/react-router';
|
|
import React from 'react';
|
|
import { Avatar } from '../components/ui/avatar';
|
|
import { Button } from '../components/ui/button';
|
|
import { Tooltip } from '../components/ui/tooltip';
|
|
import { useAuth } from '../hooks/auth';
|
|
import { appName } from '../main';
|
|
import { ColorModeButton } from '../components/ui/color-mode';
|
|
|
|
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" gap={4}>
|
|
<ColorModeButton />
|
|
|
|
{isAuthenticated ? (
|
|
<Menu.Root>
|
|
<Menu.Trigger>
|
|
<Avatar
|
|
// src={'https://avatars.githubusercontent.com/u/40203084?v=4'}
|
|
fallback={'A'}
|
|
/>
|
|
</Menu.Trigger>
|
|
<Menu.Positioner mt={2}>
|
|
<Menu.Content>
|
|
<>
|
|
<Menu.Item value="logout" onClick={async () => logout()}>
|
|
<Tooltip content="Log out">
|
|
<Stack direction="row">
|
|
<Icon color="colorPalette.500" fontSize="xl">
|
|
<i className="nf nf-fa-sign_out" />
|
|
</Icon>
|
|
Log out
|
|
</Stack>
|
|
</Tooltip>
|
|
</Menu.Item>
|
|
</>
|
|
</Menu.Content>
|
|
</Menu.Positioner>
|
|
</Menu.Root>
|
|
) : (
|
|
<>
|
|
<Separator orientation="vertical" height={5} />
|
|
<Link to="/login">
|
|
<Button>Sign in</Button>
|
|
</Link>
|
|
<Link to="/register">
|
|
<Button>Sign up</Button>
|
|
</Link>
|
|
</>
|
|
)}
|
|
|
|
{/* {!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>
|
|
<Separator style={{ padding: '4px' }} />
|
|
<Outlet />
|
|
<TanStackRouterDevtools />
|
|
</Stack>
|
|
);
|
|
}
|
|
});
|