🚧 Landing pages building blocks https://landing-blocks.now.sh
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

63 lines
1.9 KiB

import { Box, Stack } from 'layout-kit-react'
import React, { ReactNode } from 'react'
import { PageContainer, PageContainerProps } from './layout'
export type FooterProps = {
columns: { [k: string]: ReactNode[] }
businessName?: string
} & PageContainerProps
export function Footer({
columns = {},
businessName = 'Monster Inc.',
...rest
}: FooterProps) {
return (
<PageContainer
fontWeight='medium'
py='60px'
minHeight='200px'
spacing='60px'
{...rest}
>
<Stack
direction={['column', null, 'row']}
justifyContent='space-evenly'
spacing='60px'
>
{Object.keys(columns).map((k, i) => {
return (
<Stack
minW={['100%', '100%', '0']}
spacing='20px'
key={i}
>
<Box
d='block'
fontSize='text'
fontWeight='medium'
width='auto'
textAlign='left'
>
{k}
</Box>
{columns[k].map((x, i) => (
<Box opacity={0.6} key={i}>
{x}
</Box>
))}
</Stack>
)
})}
</Stack>
<Box
width='auto'
opacity={0.6}
fontSize='subtext'
alignSelf='center'
>
Copyright © {new Date().getFullYear()} {businessName}
</Box>
</PageContainer>
)
}