128 lines
4.6 KiB
TypeScript
128 lines
4.6 KiB
TypeScript
import { Icon, Input, InputGroup, Kbd, Menu, Separator, 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 { ColorModeButton } from '../components/ui/color-mode';
|
|
import { Tooltip } from '../components/ui/tooltip';
|
|
import { useAuth } from '../hooks/auth';
|
|
import { useIdentity } from '../hooks/identity';
|
|
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 { logout } = useAuth();
|
|
const identity = useIdentity();
|
|
|
|
return (
|
|
<Stack padding={3}>
|
|
<Stack flexDirection="row" justifyContent="space-between" alignItems="center">
|
|
<Stack flexDirection="row" justifyContent="center" alignItems="center" gap={4}>
|
|
<Link to="/">
|
|
<Stack direction="row" justifyContent="center" alignItems="center" gap={1}>
|
|
<Icon fontSize={24} color="colorPalette.500">
|
|
<i className="nf nf-md-bird" />
|
|
</Icon>
|
|
<Text fontSize="lg" fontWeight="bold">
|
|
{appName}
|
|
</Text>
|
|
</Stack>
|
|
</Link>
|
|
{/* <Stack hideBelow="md"> */}
|
|
{/* <Link to="/about"> */}
|
|
{/* <Icon color="colorPalette.500" fontSize="md"> */}
|
|
{/* <i className="nf nf-oct-question" /> */}
|
|
{/* </Icon> */}
|
|
{/* </Link> */}
|
|
{/* </Stack> */}
|
|
</Stack>
|
|
|
|
<Stack flexDirection="row" alignItems="center" gap={4}>
|
|
<InputGroup
|
|
hideBelow="md"
|
|
flex={1}
|
|
alignItems="center"
|
|
startElement={
|
|
<Icon color="colorPalette.500">
|
|
<i className="nf nf-oct-search" />
|
|
</Icon>
|
|
}
|
|
endElement={<Kbd>⌘K</Kbd>}
|
|
>
|
|
<Input height={8} placeholder="Search works..." />
|
|
</InputGroup>
|
|
|
|
<ColorModeButton />
|
|
|
|
{identity != null ? (
|
|
<Menu.Root>
|
|
<Menu.Trigger css={{ '&:hover': { cursor: 'pointer' } }}>
|
|
<Avatar
|
|
size="sm"
|
|
// src="https://avatars.githubusercontent.com/u/40203084?v=4"
|
|
/>
|
|
</Menu.Trigger>
|
|
<Menu.Positioner mt={2}>
|
|
<Menu.Content backgroundColor={'bg.subtle'}>
|
|
<Link to={`/profile/${identity.data.user.username}`}>
|
|
<Menu.Item value="/">
|
|
<Tooltip content="My profile">
|
|
<Stack direction="row">
|
|
<Icon color="colorPalette.500" fontSize="xl">
|
|
<i className="nf nf-fa-user" />
|
|
</Icon>
|
|
My profile
|
|
</Stack>
|
|
</Tooltip>
|
|
</Menu.Item>
|
|
</Link>
|
|
|
|
<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 height={8}>Sign in</Button>
|
|
</Link>
|
|
<Link to="/register">
|
|
<Button height={8}>Sign up</Button>
|
|
</Link>
|
|
</>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
<Separator style={{ padding: '4px' }} />
|
|
<Outlet />
|
|
<TanStackRouterDevtools />
|
|
</Stack>
|
|
);
|
|
}
|
|
});
|