Menus, globals, vendor page

frontend/components/footer.js

@@ -1,29 +1,28 @@
 import { Link } from '@chakra-ui/next-js'
-import { Box, Flex, Stack, useColorModeValue } from '@chakra-ui/react'
+import { Box, Flex, Stack, Text, useColorModeValue } from '@chakra-ui/react'
 
-export default function Footer({ siteName }) {
+export default function Footer({ menu, globals }) {
   return (
-    <>
-      <Box bg={useColorModeValue('gray.100', 'gray.900')} px={4} mt="8">
-        <Flex h={16} alignItems={'center'}>
-          <FooterMenu />
-        </Flex>
-      </Box>
-    </>
+    <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 = () => {
+const FooterMenu = ({ items }) => {
   const linkColor = useColorModeValue('gray.600', 'gray.200')
   const linkHoverColor = useColorModeValue('gray.800', 'white')
 
   return (
     <Stack direction={'row'} spacing={4} pl="4">
-      {NAV_ITEMS.map((navItem) => (
+      {items.map((navItem) => (
         <Box key={navItem.label}>
           <Link
             p={2}
-            href={navItem.href ?? '#'}
+            href={navItem.url ?? '#'}
             fontSize={'sm'}
             fontWeight={500}
             color={linkColor}
@@ -39,14 +38,3 @@ const FooterMenu = () => {
     </Stack>
   )
 }
-
-const NAV_ITEMS = [
-  {
-    label: 'Vendors',
-    href: '/vendors',
-  },
-  {
-    label: 'About Us',
-    href: '/about-us',
-  },
-]

frontend/components/header.js

@@ -2,15 +2,16 @@ 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({ siteName }) {
+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">{siteName}</Heading>
+          <Heading size="md">{globals.site_name}</Heading>
 
-          <MainMenu />
+          <MainMenu items={menu.items} />
           <Spacer />
 
           <Flex alignItems={'center'}>
@@ -24,17 +25,17 @@ export default function Header({ siteName }) {
   )
 }
 
-const MainMenu = () => {
+const MainMenu = ({ items }) => {
   const linkColor = useColorModeValue('gray.600', 'gray.200')
   const linkHoverColor = useColorModeValue('gray.800', 'white')
 
   return (
     <Stack direction={'row'} spacing={4} pl="4">
-      {NAV_ITEMS.map((navItem) => (
+      {items.map((navItem) => (
         <Box key={navItem.label}>
           <Link
             p={2}
-            href={navItem.href ?? '#'}
+            href={navItem.url ?? '#'}
             fontSize={'sm'}
             fontWeight={500}
             color={linkColor}
@@ -50,14 +51,3 @@ const MainMenu = () => {
     </Stack>
   )
 }
-
-const NAV_ITEMS = [
-  {
-    label: 'Vendors',
-    href: '/vendors',
-  },
-  {
-    label: 'About Us',
-    href: '/about-us',
-  },
-]

frontend/components/layout.js

@@ -1,13 +1,13 @@
-import { Container } from '@chakra-ui/react'
+import { Container, Box } from '@chakra-ui/react'
 import Footer from '~/components/footer'
 import Header from '~/components/header'
 
-export default function Layout({ children }) {
+export default function Layout({ globals, menus, children }) {
   return (
     <Container maxW={'8xl'}>
-      <Header />
-      <main>{children}</main>
-      <Footer />
+      <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>
   )
 }