50 lines
1.0 KiB
TypeScript
50 lines
1.0 KiB
TypeScript
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>
|
|
</>
|
|
)
|
|
}
|