import { Container } from '@mantine/core'
import { Flex, Button } from '@mantine/core'
import React from "react"

const NavLink = (props: any) =>
  <li className="nav-item">
    <a className="nav-link" href={props.href}>
      {props.children}
    </a>
  </li>

const Text = (props: any) =>
  <p>{props.children}</p>

export default function Page() {
  const demoProps = {
    bg: 'var(--mantine-color-blue-light)',
    h: 50,
    mt: 'md',
  }

  return (
    <>
      <Container {...demoProps}>Default Container</Container>

      <Container size="xs" {...demoProps}>
        xs Container
      </Container>

      <Container px={0} size="30rem" {...demoProps}>
        30rem Container without padding
      </Container>

      <Flex
        mih={50}
        bg="rgba(0, 0, 0, .3)"
        gap="md"
        justify="flex-start"
        align="flex-start"
        direction="row"
        wrap="wrap"
      >
        <Button>Button 1</Button>
        <Button>Button 2</Button>
        <Button>Button 3</Button>
      </Flex>
    </>
  )
}