Progress Dashboard Component

Build a React component that displays multiple circular progress indicators with different styling configurations to showcase various completion states.

Requirements

Create a ProgressDashboard component that renders three circular progress indicators side-by-side:

1. Completed Task Indicator

   • Shows 100% progress
   • Uses a round stroke line cap style
   • Stroke width of 8 pixels
   • Green stroke color (#52c41a)
   • Light gray background rail (#f0f0f0)

2. In-Progress Task Indicator

   • Shows 65% progress
   • Uses a round stroke line cap style
   • Stroke width of 8 pixels
   • Blue stroke color (#1890ff)
   • Light gray background rail (#f0f0f0)

3. Low Progress Task Indicator

   • Shows 15% progress
   • Uses a round stroke line cap style
   • Stroke width of 8 pixels
   • Orange stroke color (#fa8c16)
   • Light gray background rail (#f0f0f0)

The component should display these three indicators in a horizontal layout with appropriate spacing.

Implementation

@generates

Export the component as the default export from the file.

API

import React from 'react';

export default function ProgressDashboard(): React.ReactElement;

Test Cases

• The component renders three circular progress indicators @test
• The first indicator shows 100% progress with green color @test
• The second indicator shows 65% progress with blue color @test
• The third indicator shows 15% progress with orange color @test
• All indicators use round stroke line caps @test

Dependencies { .dependencies }

react { .dependency }

Provides the React framework for building the component.

@rc-component/progress { .dependency }

Provides circular progress indicator components with advanced styling capabilities.