import {
  Meta,
  Story,
  Preview,
  Title,
  Subtitle,
  Description,
  Props,
} from '@storybook/addon-docs/blocks';
import { withKnobs } from '@storybook/addon-knobs';

import { Page } from '../';
import { LayoutStory } from './page.stories.js';

<Meta title='Originals/Layout' component={Page} decorators={[withKnobs]}/>

<Title>Page</Title>

<Description>
  Page dos aplicativos Eureca. 
</Description>

<Description>
  O componente cria uma página com um DrawerMenu e o conteúdo passado ao componente.
</Description>

<Preview>
  <Story name="Page">
    <LayoutStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| list | Objeto com os itens do DrawerMenu. Ver componente para detalhamento. <br /> 'object' | {} |
| children | Conteúdo da página <br /> 'node' \| 'element' | null |

<Subtitle>Exemplo de Aplicação</Subtitle>

```jsx
<Page list={AdminList}>
  <Container maxWidth="xl">
    CONTEUDO AQUI
  </Container>
</Page>
```