import './demo1.css';
import Badge from '../index';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div>
    <Badge dot>
      <a href="#" className="basic-example"></a>
    </Badge>

    <p> 当设置数字时支持两种尺寸size = 'medium' | 'small' ，默认为small。</p>
    <Badge count={5} size='medium'>
      <a href="#" className="basic-example1"></a>
    </Badge>

    <Badge count={100} overflowCount={10} size='medium'>
      <a href="#" className="basic-example1"></a>
    </Badge>
    <br />
    <br />
    <Badge count={5}>
      <a href="#" className="basic-example"></a>
    </Badge>


    <Badge count={100} overflowCount={10} size='small'>
      <a href="#" className="basic-example"></a>
    </Badge>
    <br />
    <br />

    <h4>状态样式</h4>
    <p> 有三种状态，通过 status = 'success' | 'warning' | 'error' 设置，当传入 dot 时只显示小圆点，不传入时显示对应状态图标。</p>
    <Badge dot status='success'>
      <a href="#" className="basic-example"></a>
    </Badge>
    <Badge dot status='warning'>
      <a href="#" className="basic-example"></a>
    </Badge>
    <Badge dot status='error'>
      <a href="#" className="basic-example"></a>
    </Badge>
    <br />
    <br />
    <Badge status='success'>
      <a href="#" className="basic-example"></a>
    </Badge>
    <Badge status='warning'>
      <a href="#" className="basic-example"></a>
    </Badge>
    <Badge status='error'>
      <a href="#" className="basic-example"></a>
    </Badge>
  </div>
  , document.getElementById('badge-demo-1'));