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',
-  },
-]