41 lines
1.1 KiB
JavaScript
41 lines
1.1 KiB
JavaScript
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>
|
|
)
|
|
}
|