import Header from './header'; import Footer from './footer'; import { useColorModeValue, Flex } from '@chakra-ui/core'; export default function Page({ children }) { const bgColor = useColorModeValue('white', 'gray.900'); const primarytextColor = useColorModeValue('black', 'white'); return ( <> <Header /> <Flex as="main" w="full" justify="center" direction="column" px={[4, 6, null, 8]} mt={16} h="calc(100vh - 4rem)" bg={bgColor} color={primarytextColor} > <Flex direction="column" w="full" h="full" justify="center" align="center" pt={[8, 10, null, 12]} > <Flex direction="column" w="full" h="full" maxW="5xl"> {children} <Footer /> </Flex> </Flex> </Flex> </> ); }