/**
 * title: "徽标与标识组合"
 * description: "超过overflow的数值，会显示overflow+，overflow默认值为99。"
 */
import React from 'react';
import { Badge } from '@alicloud/console-components';

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

const squareStyles = {
  display: 'inline-block',
  borderRadius: '4px',
  background: '#eee',
  width: '32px',
  height: '32px',
};
const Square = () => <div style={squareStyles} />;

export default () => {
  return (
    <div style={{ display: 'flex', gap: '50px' }}>
      <Badge count={1}>
        <Square />
      </Badge>
      <Badge count={23}>
        <Square />
      </Badge>
      <Badge count={456} overflowCount={999}>
        <Square />
      </Badge>
      <Badge content={'NEW'} style={badgeTextStyle}>
        <Square />
      </Badge>
      <Badge content={'最新上线'} style={badgeTextStyle}>
        <Square />
      </Badge>
    </div>
  );
};