import './demo2.css';
import Box from '../../box';
import Button from '..';
import React from 'react';
import ReactDOM from 'react-dom';

const props = {
  component: 'a',
  href: 'http://www.alibaba.com',
  target: '_blank',
};

ReactDOM.render(
  <div>
    <Box direction="row" className="demo2-btn-row" spacing={20} >
      <span className="demo2-btn-label">XL:</span>
      <Button {...props} size="xl" type="primary">alibaba.com</Button>
      <Button {...props} size="xl" type="secondary">alibaba.com</Button>
      <Button {...props} size="xl" type="normal">alibaba.com</Button>
      <Button {...props} size="xl" loading>alibaba.com loading</Button>
    </Box>
    <Box direction="row" className="demo2-btn-row" spacing={20} >
      <span className="demo2-btn-label">Large:</span>
      <Button {...props} size="large" type="primary">alibaba.com</Button>
      <Button {...props} size="large" type="secondary">alibaba.com</Button>
      <Button {...props} size="large" type="normal">alibaba.com</Button>
      <Button {...props} size="large" loading>alibaba.com loading</Button>
    </Box>
    <Box direction="row" className="demo2-btn-row" spacing={20} >
      <span className="demo2-btn-label">Medium:</span>
      <Button {...props} size="medium" type="primary">alibaba.com</Button>
      <Button {...props} size="medium" type="secondary">alibaba.com</Button>
      <Button {...props} size="medium" type="normal">alibaba.com</Button>
      <Button {...props} size="medium" loading>alibaba.com loading</Button>
    </Box>
    <Box direction="row" className="demo2-btn-row" spacing={20} >
      <span className="demo2-btn-label">Small:</span>
      <Button {...props} size="small" type="primary">alibaba.com</Button>
      <Button {...props} size="small" type="secondary">alibaba.com</Button>
      <Button {...props} size="small" type="normal">alibaba.com</Button>
      <Button {...props} size="small" loading>alibaba.com loading</Button>
    </Box>
    <Box direction="row" className="demo2-btn-row" spacing={20} >
      <span className="demo2-btn-label">XS:</span>
      <Button {...props} size="xs" type="primary">alibaba.com</Button>
      <Button {...props} size="xs" type="secondary">alibaba.com</Button>
      <Button {...props} size="xs" type="normal">alibaba.com</Button>
      <Button {...props} size="xs" loading>alibaba.com loading</Button>
    </Box>
  </div>, document.getElementById('button-demo-2'));