53 lines
1.1 KiB
JavaScript
53 lines
1.1 KiB
JavaScript
import { Link } from '@chakra-ui/next-js'
|
|
import { Box, Flex, Stack, 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',
|
|
},
|
|
]
|