/**
 * title: "小红点"
 * description: "dot 属性控制不展示数字，只展示一个小红点"
 */
import React from 'react';
import { Badge } from '@alicloud/console-components';

const squareStyles = {
  display: 'inline-block',
  borderRadius: '4px',
  background: '#eee',
  width: '32px',
  height: '32px',
};

const circleStyles = {
  display: 'inline-block',
  borderRadius: '16px',
  background: '#eee',
  width: '32px',
  height: '32px',
};

const contentStyle = {
  display: 'flex',
  gridTemplateColumns: 'repeat(3, 1fr)',
  gap: 36,
  alignItems: 'center',
};

const Square = () => <div style={squareStyles} />;
const Circle = () => <div style={circleStyles} />;

export default function Demo4() {
  return (
    <div style={contentStyle}>
      <Badge dot>
        <Square />
      </Badge>
      <Badge dot>
        <Circle />
      </Badge>
      <Badge dot>
        <span style={{ marginRight: '6px' }}>文字描述</span>
      </Badge>
    </div>
  );
}