WIP: app -> pages

frontend/components/footer.js

@@ -0,0 +1,51 @@
+import { Box, Flex, Link, Stack, useColorMode, useColorModeValue } from '@chakra-ui/react'
+
+export default function Footer({ siteName }) {
+  return (
+    <>
+      <Box bg={useColorModeValue('gray.100', 'gray.900')} px={4} mt="8">
+        <Flex h={16} alignItems={'center'}>
+          <FooterMenu />
+        </Flex>
+      </Box>
+    </>
+  )
+}
+
+const FooterMenu = () => {
+  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) => (
+        <Box key={navItem.label}>
+          <Link
+            p={2}
+            href={navItem.href ?? '#'}
+            fontSize={'sm'}
+            fontWeight={500}
+            color={linkColor}
+            _hover={{
+              textDecoration: 'none',
+              color: linkHoverColor,
+            }}
+          >
+            {navItem.label}
+          </Link>
+        </Box>
+      ))}
+    </Stack>
+  )
+}
+
+const NAV_ITEMS = [
+  {
+    label: 'Vendors',
+    href: '/vendors',
+  },
+  {
+    label: 'About Us',
+    href: '/about-us',
+  },
+]