Dashboard Progress Indicator

Build a React component that displays a circular progress indicator for a dashboard showing task completion status.

Requirements

Create a TaskProgress component that:

1. Accepts a completed prop (number representing percentage 0-100)
2. Displays a circular progress indicator showing the completion percentage
3. Uses a stroke width of 8 pixels for the progress circle
4. Uses #4CAF50 (green) as the progress color
5. Uses #E0E0E0 (light gray) as the background rail color
6. Exports the component as the default export

The component should render a visually appealing circular progress indicator that clearly shows how much of a task is complete.

Implementation

@generates

API

interface TaskProgressProps {
  completed: number;
}

export default function TaskProgress(props: TaskProgressProps): JSX.Element;

Dependencies { .dependencies }

react { .dependency }

Provides the React library for building the component.

@rc-component/progress { .dependency }

Provides circular progress bar UI components.

Test Cases

Basic rendering

• When completed is 0, the component renders a circle with no visible progress @test
• When completed is 50, the component renders a circle that is half filled @test
• When completed is 100, the component renders a completely filled circle @test

Visual styling

• The progress indicator uses stroke width of 8 pixels @test
• The progress color is #4CAF50 (green) @test
• The background rail color is #E0E0E0 (light gray) @test