import React, { Component } from 'react';
import { Button, NavBar, Icon } from 'antd-mobile'

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">primary</Button>
        <Button type="primary" inline style={{ marginRight: '4px' }}>inline primary</Button>
        <Button type="ghost" inline size="small" style={{ marginRight: '4px' }}>ghost</Button>
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => console.log('onLeftClick')}
          rightContent={[
            <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
            <Icon key="1" type="ellipsis" />,
          ]}
        >NavBar</NavBar>
        <NavBar
          mode="dark"
          leftContent="Back"
          rightContent={[
            <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
            <Icon key="1" type="ellipsis" />,
          ]}
        >NavBar</NavBar>
      </div>
    );
  }
}

export default App;