import React from 'react';
import ReactDom from 'react-dom';
import Statusbox from '../index';
import { Demo, DemoPanel } from '../../../external/demo/index';
import Doc from './doc.md';
import '../style/v2.scss';

export default class App extends React.PureComponent {

  render() {
    return (
      <Demo doc={<Doc />} name="Statusbox">
        <DemoPanel title="不同type">
          <Statusbox type="info">这是一段info信息提示</Statusbox>
          <div style={{ height: '10px' }}></div>
          <Statusbox type="success">这是一段success信息提示</Statusbox>
          <div style={{ height: '10px' }}></div>
          <Statusbox type="alert">这是一段alert信息提示</Statusbox>
          <div style={{ height: '10px' }}></div>
          <Statusbox type="question">这是一段question信息提示</Statusbox>
          <div style={{ height: '10px' }}></div>
          <Statusbox type="loading">这是一段loading信息提示</Statusbox>
          <div style={{ height: '10px' }}></div>
          <Statusbox>默认info类型</Statusbox>
        </DemoPanel>
        <DemoPanel title="不同大小">
          <Statusbox size="m">这是一段m信息提示</Statusbox>
          <div style={{ height: '10px' }}></div>
          <Statusbox size="l">这是一段l信息提示</Statusbox>
          <div style={{ height: '10px' }}></div>
          <Statusbox size="l" type="loading">这是一段l信息提示</Statusbox>
        </DemoPanel>
        <DemoPanel title="复杂内容">
          <Statusbox>
            <strong>机构评级功能已于2017-3-1正式下线</strong>
            <p>之前“三星级及以上机构课程免审”的措施将由以下新措施代替：</p>
            <ul>
              <li>之前达到免审条件的机构继续免审</li>
              <li>之前未达到免审条件的机构，若某个自然月的开课审核通过率超过90%，则下个自然月进入课程免审名单</li>
            </ul>

            特此知会！腾讯课堂感谢您的配合！
          </Statusbox>
        </DemoPanel>
      </Demo>
    );
  }
}

const demo = document.getElementById('demo');
if (demo) {
  ReactDom.render(<App />, demo);
}