Rename frontend to legacy-frontend

legacy-frontend/components/footer.js

@@ -0,0 +1,40 @@
+import { Link } from '@chakra-ui/next-js'
+import { Box, Flex, Stack, Text, useColorModeValue } from '@chakra-ui/react'
+
+export default function Footer({ menu, globals }) {
+  return (
+    <Box bg={useColorModeValue('gray.100', 'gray.900')} px={4} mt="8">
+      <Flex h={16} alignItems={'center'} justifyContent="space-between">
+        <FooterMenu items={menu.items} />
+        <Text>{globals.copyright}</Text>
+      </Flex>
+    </Box>
+  )
+}
+
+const FooterMenu = ({ 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>
+  )
+}

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>
+  )
+}

legacy-frontend/components/layout.js

@@ -0,0 +1,13 @@
+import { Container, Box } from '@chakra-ui/react'
+import Footer from '~/components/footer'
+import Header from '~/components/header'
+
+export default function Layout({ globals, menus, children }) {
+  return (
+    <Container maxW={'8xl'}>
+      <Header menu={menus.find((m) => m.id === 'MAIN_MENU')} globals={globals} />
+      <Box marginY="6">{children}</Box>
+      <Footer menu={menus.find((m) => m.id === 'FOOTER_MENU')} globals={globals} />
+    </Container>
+  )
+}

legacy-frontend/components/pagination.js

@@ -0,0 +1,78 @@
+import { Flex, Link, Select, Text } from '@chakra-ui/react'
+import clsx from 'clsx'
+import NextLink from 'next/link'
+import { useRouter } from 'next/router'
+import { Fragment } from 'react'
+
+export default function Pagination({ page = 1, itemsPerPage = 12, totalItems = 0, limit = 3 }) {
+  const router = useRouter()
+
+  const totalPages = Math.ceil(totalItems / itemsPerPage)
+
+  if (totalPages === 1) return <></>
+
+  const links = new Array(totalPages)
+    .fill(true)
+    .map((_v, i) => (i < limit || i >= totalPages - limit || (i >= page - limit && i < page + limit - 1)) && i + 1)
+    .filter((i) => i !== false)
+
+  return (
+    <>
+      <Flex justifyContent="space-between" direction={['column', 'row']} mt={6} mb={6} gap={3}>
+        <Link
+          //
+          as={NextLink}
+          href={{ query: { ...router.query, page: Math.max(1, page - 1) } }}
+          variant="pagination"
+        >
+          &larr; Previous
+        </Link>
+        <Flex gap={1} display={['none', 'none', 'flex']}>
+          {links.map((v, i) => (
+            <Fragment key={i}>
+              {v > 1 && v - 1 !== links[i - 1] && (
+                <Text marginX={3} lineHeight={10}>
+                  &hellip;
+                </Text>
+              )}
+              <Link
+                //
+                key={v}
+                as={NextLink}
+                prefetch={false}
+                href={{ query: { ...router.query, page: v } }}
+                className={clsx({
+                  current: v === page,
+                })}
+                variant="pagination"
+              >
+                {v}
+              </Link>
+            </Fragment>
+          ))}
+        </Flex>
+        <Select
+          value={page}
+          onChange={(v) => router.push({ query: { ...router.query, page: v.target.value } })}
+          display={['flex', 'flex', 'none']}
+          textAlign="center"
+        >
+          {new Array(totalPages).fill(true).map((v, i) => (
+            <option value={i + 1} key={i}>
+              {i + 1}
+            </option>
+          ))}
+        </Select>
+        <Link
+          //
+          as={NextLink}
+          href={{ query: { ...router.query, page: Math.min(totalPages, page + 1) } }}
+          variant="pagination"
+          textAlign="right"
+        >
+          Next &rarr;
+        </Link>
+      </Flex>
+    </>
+  )
+}