1import {
 2  Box,
 3  HStack,
 4  Text,
 5} from '@chakra-ui/react';
 6import { useDashboard } from 'stores';
 7import { FC, ReactNode } from 'react';
 8import { useTranslation } from 'react-i18next';
 9import { Language } from 'components/language';
10import { ThemeToggle } from 'components/theme-toggler';
11
12type HeaderProps = {
13  actions?: ReactNode;
14};
15
16import { GithubMenuButton } from './github-button';
17import { HeaderMenu } from './menu';
18
19export const Header: FC<HeaderProps> = () => {
20  const { activePage, } = useDashboard();
21  const { t } = useTranslation();
22  return (
23    <HStack
24      gap={2}
25      justifyContent="space-between"
26      __css={{
27        '& .menuList': {
28          direction: 'ltr',
29        },
30      }}
31      bg='white'
32      _dark={{ bg: 'dark-bg' }}
33      p="6"
34      borderBottom={'1px solid gray.600'}
35      position="sticky"
36      alignItems="center"
37      zIndex={999}
38      top={0}
39    >
40      <Text as="h1" fontWeight="bold" fontSize="2xl" m="0">
41        {t(activePage.name)}
42      </Text>
43      <Box css={{ direction: 'ltr' }}>
44        <HStack alignItems="center">
45          <GithubMenuButton />
46          <Language />
47          <ThemeToggle />
48          <HeaderMenu />
49        </HStack>
50      </Box>
51    </HStack>
52  );
53};