React Progress Bar Component with TypeScript

This challenge asks you to build a reusable progress bar component in React using TypeScript. Progress bars are essential for providing visual feedback to users during long-running operations, enhancing the user experience by indicating progress and estimated completion time. This component should be flexible, allowing customization of appearance and behavior.

Problem Description

You need to create a React component called ProgressBar that visually represents the progress of a task. The component should accept a percentage prop, which is a number between 0 and 100 (inclusive), representing the completion percentage. The component should render a bar that fills proportionally to the given percentage.

Key Requirements:

• percentage Prop: The component must accept a percentage prop of type number.
• Visual Representation: The component must visually display a progress bar. This can be achieved using a div with a nested div representing the filled portion.
• Dynamic Width: The width of the filled portion of the bar should dynamically change based on the percentage prop.
• Styling: The component should be styled with basic CSS to provide a clear visual representation. You can use inline styles or a CSS file. The bar should have a background color and a filled color.
• TypeScript: The component must be written in TypeScript, including proper type annotations for props.

Expected Behavior:

• When percentage is 0, the progress bar should be empty.
• When percentage is 100, the progress bar should be completely filled.
• For any percentage between 0 and 100, the bar should be filled proportionally.
• The component should render without errors for valid percentage values.

Edge Cases to Consider:

• Invalid Percentage Values: While the component should ideally handle invalid percentage values gracefully (e.g., percentages outside the 0-100 range), the primary focus is on the core functionality with valid inputs. Consider how you might handle these cases (e.g., clamping the value to 0-100).
• Zero Percentage: Ensure the component renders correctly when the percentage is zero.

Examples

Example 1:

Input: percentage = 50
Output: A progress bar that is 50% filled.
Explanation: The filled portion of the bar should occupy 50% of the total width.

Example 2:

Input: percentage = 100
Output: A progress bar that is completely filled.
Explanation: The filled portion of the bar should occupy 100% of the total width.

Example 3:

Input: percentage = 0
Output: An empty progress bar.
Explanation: The filled portion of the bar should have a width of 0.

Constraints

• The percentage prop must be a number.
• The percentage prop should be between 0 and 100 (inclusive). While error handling isn't strictly required, consider how you might handle values outside this range.
• The component should be reasonably performant. Avoid unnecessary re-renders.
• The styling should be clear and visually appealing, but simplicity is preferred over complex styling.

Notes

• Consider using inline styles for simplicity, but feel free to use a CSS file if you prefer.
• Think about how you can make the component reusable and customizable. While this challenge focuses on the core functionality, consider how you might add props for things like bar color, background color, and height in the future.
• Focus on creating a functional and visually correct component first. Error handling and advanced features can be added later.
• Remember to use TypeScript to define the types of your props.