/**
 * title: "徽标与文字组合"
 * description: "不包裹任何元素即独立使用，可自定样式展现。"
 */
import React from 'react';
import { Badge } from '@alicloud/console-components';

const badgeTextStyle = {
  backgroundColor: '#D50B16',
  color: '#fff',
  borderRadius: '10px',
  lineHeight: '20px',
};

const flexStyle = {
  display: 'flex',
  alignItems: 'center',
  marginBottom: '8px',
};

export default function Demo3() {
  return (
    <div>
      <div style={flexStyle}>
        <span style={{ marginRight: '8px' }}>文字描述</span>
        <Badge count={1} />
      </div>
      <div style={flexStyle}>
        <span style={{ marginRight: '8px' }}>文字描述</span>
        <Badge count={23} overflowCount={999} />
      </div>
      <div style={flexStyle}>
        <span style={{ marginRight: '8px' }}>文字描述</span>
        <Badge count={456} overflowCount={999} />
      </div>
      <div style={flexStyle}>
        <span style={{ marginRight: '8px' }}>文字描述</span>
        <Badge content={'NEW'} style={badgeTextStyle} />
      </div>
      <div style={flexStyle}>
        <span style={{ marginRight: '8px' }}>文字描述</span>
        <Badge content={'最新上线'} style={badgeTextStyle} />
      </div>
    </div>
  );
}