/**
 * title: "环形状态"
 * description: "通过设置shape属性为circle，设置成环形样式。"
 */
import React from 'react';
import { Progress } from '@alicloud/console-components';

const h2Style = {
  fontSize: '12px',
  lineHeight: '22px',
  marginTop: '24px',
};
const containerStyle = {
  display: 'flex',
  gap: '10px',
};
export default () => {
  return (
    <div style={{ display: 'flex' }}>
      <div style={{ flex: 1 }}>
        <div style={h2Style}>默认</div>
        <div style={containerStyle}>
          <Progress shape="circle" percent={80} state="normal" />
          <Progress shape="circle" percent={60} state="success" />
          <Progress shape="circle" percent={40} state="error" />
        </div>
      </div>
      <div style={{ flex: 1 }}>
        <div style={h2Style}>小号</div>
        <div style={containerStyle}>
          <Progress shape="circle" percent={80} state="normal" size="small" />
          <Progress shape="circle" percent={60} state="success" size="small" />
          <Progress shape="circle" percent={40} state="error" size="small" />
        </div>
      </div>
    </div>
  );
};