/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Button from 'nuke-button';
import Page from 'nuke-page';


const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <Page title="Button">
        <Page.Intro main="type:primary" sub="主操作" />
        <Button.Group style={styles.btnWithMargin} >
          <Button type="primary">primary</Button>
          <Button disabled type="primary">disabled</Button>
        </Button.Group>
        <Page.Intro main="type:secondary" sub="次要操作" />
        <Button.Group style={styles.btnWithMargin}>
          <Button type="secondary">secondary</Button>
          <Button disabled type="secondary">disabled</Button>
        </Button.Group>
        <Page.Intro main="type:normal" sub="普通操作" />
        <Button.Group style={styles.btnWithMargin}>
          <Button type="normal">normal</Button>
          <Button disabled type="normal">disabled</Button>
        </Button.Group>
        <Page.Intro main="shape:warning" sub="警告类操作" />
        <Button.Group style={styles.btnWithMargin}>
          <Button type="primary" shape="warning">primary</Button>
          <Button type="normal" shape="warning">normal</Button>
        </Button.Group>
        <Page.Intro main="block:true" sub="独占一行" />
        <Button style={styles.btnWithMargin} type="primary" block>primary</Button>
        <Page.Intro main="rect:true" sub="直角" />
        <Button.Group style={styles.btnWithMargin}>
          <Button style={styles.btn} rect type="normal">Normal</Button>
          <Button style={styles.btn} rect type="primary">Primary</Button>
          <Button style={styles.btn} rect type="secondary">Secondary</Button>
        </Button.Group>

        <Page.Intro main="Button.Group rect" sub="Group用法" />
        <Button.Group style={styles.btnWithMargin} rect>
          <Button type="normal">Normal</Button>
          <Button type="third">Third</Button>
          <Button type="primary">Primary</Button>
        </Button.Group>
      </Page>

    );
  }
};
const styles = {
  btnWithMargin: {
    marginTop: '30rem', // #1170bc;
    marginBottom: '50rem', // #1170bc;
    marginLeft: '42rem', // #1170bc;
    marginRight: '42rem', // #1170bc;
  },
};
render(<App />);