29 lines
799 B
TypeScript
29 lines
799 B
TypeScript
import React from 'react'
|
|
import { Grid, GridItem } from '@chakra-ui/react'
|
|
|
|
export const MainPage = () => {
|
|
return (
|
|
<Grid
|
|
h="100%"
|
|
bgColor="gray.300"
|
|
templateAreas={{
|
|
md: `"header header"
|
|
"aside main"
|
|
"footer footer"`,
|
|
sm: `"header"
|
|
"main"
|
|
"aside"
|
|
"footer"`,
|
|
}}
|
|
gridTemplateRows={{ sm: '1fr', md: '50px 1fr 30px' }}
|
|
gridTemplateColumns={{ sm: '1fr', md: '150px 1fr' }}
|
|
gap={4}
|
|
>
|
|
<GridItem bgColor="green.100" gridArea="header">header</GridItem>
|
|
<GridItem bgColor="green.300" gridArea="aside">aside</GridItem>
|
|
<GridItem bgColor="green.600" gridArea="main" h="100vh">main</GridItem>
|
|
<GridItem bgColor="green.300" gridArea="footer">footer</GridItem>
|
|
</Grid>
|
|
)
|
|
}
|