File Upload Progress Tracker

Build a React component that displays the upload progress of a single file using a progress indicator.

Requirements

Create a FileUploadProgress component that:

1. Displays a linear progress bar showing the upload percentage (0-100)
2. Shows the current percentage as text below the progress bar (e.g., "45%")
3. Accepts a progress prop (number between 0 and 100) to control the displayed progress
4. Uses a 6-pixel stroke width for better visibility
5. Uses a blue color (#1890ff) for the progress bar

The component should be a straightforward implementation that receives a progress value and displays it visually.

Implementation

@generates

API

import React from 'react';

interface FileUploadProgressProps {
  progress: number;
}

export function FileUploadProgress(props: FileUploadProgressProps): JSX.Element;

Test Cases

• Renders with 0% progress showing empty progress bar @test
• Renders with 50% progress showing half-filled progress bar @test
• Renders with 100% progress showing completely filled progress bar @test
• Displays the percentage text correctly (e.g., "25%" when progress is 25) @test

Dependencies { .dependencies }

@rc-component/progress { .dependency }

Provides React progress bar UI components.

@satisfied-by

React { .dependency }

Provides the React framework for building UI components.

@satisfied-by