Rename frontend to legacy-frontend

legacy-frontend/components/header.js

@@ -0,0 +1,53 @@
+import { MoonIcon, SunIcon } from '@chakra-ui/icons'
+import { Box, Button, Flex, Heading, Spacer, Stack, useColorMode, useColorModeValue } from '@chakra-ui/react'
+import { Link } from '@chakra-ui/next-js'
+
+export default function Header({ menu, globals }) {
+  const { colorMode, toggleColorMode } = useColorMode()
+
+  return (
+    <>
+      <Box bg={useColorModeValue('gray.100', 'gray.900')} px={4}>
+        <Flex h={16} alignItems={'center'}>
+          <Heading size="md">{globals.site_name}</Heading>
+
+          <MainMenu items={menu.items} />
+          <Spacer />
+
+          <Flex alignItems={'center'}>
+            <Stack direction={'row'} spacing={7}>
+              <Button onClick={toggleColorMode}>{colorMode === 'light' ? <MoonIcon /> : <SunIcon />}</Button>
+            </Stack>
+          </Flex>
+        </Flex>
+      </Box>
+    </>
+  )
+}
+
+const MainMenu = ({ items }) => {
+  const linkColor = useColorModeValue('gray.600', 'gray.200')
+  const linkHoverColor = useColorModeValue('gray.800', 'white')
+
+  return (
+    <Stack direction={'row'} spacing={4} pl="4">
+      {items.map((navItem) => (
+        <Box key={navItem.label}>
+          <Link
+            p={2}
+            href={navItem.url ?? '#'}
+            fontSize={'sm'}
+            fontWeight={500}
+            color={linkColor}
+            _hover={{
+              textDecoration: 'none',
+              color: linkHoverColor,
+            }}
+          >
+            {navItem.label}
+          </Link>
+        </Box>
+      ))}
+    </Stack>
+  )
+}