import { Flex } from '@chakra-ui/react'
import { Footer } from './Footer'
import { Main } from './Main'
import { Navbar } from './Navbar'

export const App = () => {
  return (
    <Flex direction="column" flex="1">
      <Navbar />
      <Main />
      <Footer />
    </Flex>
  )
}


App.jsx

App.tsx

import { Box, Container } from '@chakra-ui/react'
import { Placeholder } from './Placeholder'

export const Footer = (props) => {
  return (
    <Box as="footer" role="contentinfo" bg="bg-accent" {...props}>
      <Container>
        <Placeholder minH="20">Footer</Placeholder>
      </Container>
    </Box>
  )
}


Footer.jsx

import { Box, BoxProps, Container } from '@chakra-ui/react'
import { Placeholder } from './Placeholder'

export const Footer = (props: BoxProps) => {
  return (
    <Box as="footer" role="contentinfo" bg="bg-accent" {...props}>
      <Container>
        <Placeholder minH="20">Footer</Placeholder>
      </Container>
    </Box>
  )
}


Footer.tsx

import { Container, Flex } from '@chakra-ui/react'
import { Placeholder } from './Placeholder'

export const Main = (props) => {
  return (
    <Flex as="main" role="main" direction="column" flex="1" py="16" {...props}>
      <Container flex="1">
        <Placeholder minH="lg" bg="bg-accent">
          Main
        </Placeholder>
      </Container>
    </Flex>
  )
}


Main.jsx

import { Container, Flex, FlexProps } from '@chakra-ui/react'
import { Placeholder } from './Placeholder'

export const Main = (props: FlexProps) => {
  return (
    <Flex as="main" role="main" direction="column" flex="1" py="16" {...props}>
      <Container flex="1">
        <Placeholder minH="lg" bg="bg-accent">
          Main
        </Placeholder>
      </Container>
    </Flex>
  )
}


Main.tsx

import { Box, Container } from '@chakra-ui/react'
import { Placeholder } from './Placeholder'

export const Navbar = () => {
  return (
    <Box as="nav" role="navigation" bg="bg-accent">
      <Container>
        <Placeholder minH="20">Navigation</Placeholder>
      </Container>
    </Box>
  )
}


Navbar.jsx

Navbar.tsx

import { Box } from '@chakra-ui/react'

export const Placeholder = (props) => {
  return <Box role="presentation" py="3" px="4" color="on-accent" {...props} />
}


Placeholder.jsx

import { Box, BoxProps } from '@chakra-ui/react'

export const Placeholder = (props: BoxProps) => {
  return <Box role="presentation" py="3" px="4" color="on-accent" {...props} />
}


Layouts