import
{
  PageAndMenu,
  Page,
  Menu,
  MenuButton,
  Form,
  Snackbar,
  Tooltip,
  ActivityIndicator,
  TextInput,
  Select,
  Button,
  Switch,
  Checkbox,
  SegmentedControl,
  FileUpload,
  Modal
}
from 'react-responsive-ui'

<PageAndMenu>
  <Menu
    slideout
    items=
    {[
      { name: 'One', link: '/one' },
      { name: 'Two', link: '/two' }
    ]}/>

  <Page>
    <MenuButton/>

    <Snackbar value="That's the snackbar on the bottom of the screen"/>

    <Tooltip text="A tooltip">Hover this</Tooltip>

    <ActivityIndicator/>

    <Form action={() => alert('Form submitted')}>
      <TextInput
        label="Enter something"
        value={this.state.text}
        onChange={text => this.setState({ text })}/>

      <TextInput
        multiline
        label="Enter description"
        value={this.state.description}
        onChange={description => this.setState({ description })}/>

      <Select
        label="Select one"
        value={this.state.fruit}
        onChange={fruit => this.setState({ fruit })}
        options=
        {[
          { value: 'A', label: 'Apples' },
          { value: 'O', label: 'Oranges' }
        ]}/>

      <SegmentedControl
        value={this.state.fruit}
        onChange={fruit => this.setState({ fruit })}
        options=
        {[
          { value: 'A', label: 'Apples' },
          { value: 'O', label: 'Oranges' }
        ]}/>

      <Switch
        value={this.state.switch}
        onChange={switch => this.setState({ switch })}>
        IOS style
      </Switch>

      <Checkbox
        value={this.state.checkbox}
        onChange={checkbox => this.setState({ checkbox })}>
        Tickable
      </Switch>

      <FileUpload
        onChange={file => alert(file.name)}>
        Click here to choose file for upload
      </FileUpload>

      <Button submit>Submit</Button>
    </Form>

    <Modal
      shown={this.state.showModal}>
      This is a modal
      <Button action={() => this.setState({ showModal: false })>Hide</Button>
    </Modal>

    <Button action={() => this.setState({ showModal: true })>Show modal</Button>
  </Page>
</PageWithMenu>

<PageAndMenu>
  {/* Slideout menu (for small screens) */}
  {/* Slides over the `<Page/>` */}
  <Menu slideout items={...}/>
  <Page>
    {/* Slideout menu toggler */}
    <MenuButton/>
    {/* Full-sized menu (for wide screens) */}
    <Menu items={...}/>
  </Page>
</PageAndMenu>