## Solution 1: functional
```js
import React from 'react';
import styled from 'styled-components'

const ProgressBar = ({ percent = 12 }) => {
 const cappedPercent = Math.min(Math.max(0, percent), 100);

 return (
 <Wrapper data-testid="wrapper">
 <FilledBar data-testid="progress" percent={cappedPercent} />
 </Wrapper>
 );
};

export default ProgressBar;

const Wrapper = styled.div`
 width: 100%;
 height: 20px;
 border-radius: 5px;
 background-color: lightgrey;
`;

const FilledBar = styled.div`
 height: 100%;
 background-color: green;
 border-radius: 5px;
 width: ${props => props.percent}%;
`;
```
The component uses two styled-components, `Wrapper` and `FilledBar`, to create the appearance of the progress bar. The `Wrapper` component is a `div` element that acts as the container for the progress bar and is styled to have a light grey background color and a height of `20px` with rounded corners (`border-radius: 5px`).
The `FilledBar` component represents the filled area of the progress bar and is also a `div` element. It takes the `percent` prop passed to the `ProgressBar` component and sets its width as a percentage of the `Wrapper` component's width. The height of the `FilledBar` component is set to `100%` to fill the height of the `Wrapper` component. The background color of the `FilledBar` component is set to green and its border-radius is set to `5px` to match the rounded corners of the `Wrapper` component.
The `cappedPercent` variable is used to set a limit on the `percent` prop value to ensure that it is always between 0 and 100.
Finally, the component returns a `Wrapper` component with a `FilledBar` component inside it, and the width of the `FilledBar` component is set based on the `percent` prop passed to the `ProgressBar` component.
## Solution 2: class-component
```js
import React, { Component } from 'react';
import styled from 'styled-components'

class ProgressBar extends Component {
 constructor(props) {
 super(props);

 const { percent = 12 } = props;
 this.cappedPercent = Math.min(Math.max(0, percent), 100);
 }

 render() {
 return (
 <Wrapper data-testid="wrapper">
 <FilledBar data-testid="progress" percent={this.cappedPercent} />
 </Wrapper>
 );
 }
}

export default ProgressBar;

const Wrapper = styled.div`
 width: 100%;
 height: 20px;
 border-radius: 5px;
 background-color: lightgrey;
`;

const FilledBar = styled.div`
 height: 100%;
 background-color: green;
 border-radius: 5px;
 width: ${props => props.percent}%;
`;
```

Create a component called <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">ProgressBar</code> which displays a progress bar. The progress bar should have the following styling applied:
<ul>
<li>A width of <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">100%</code></li>
<li>A height of <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">20px</code></li>
<li>A border radius of <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">5px</code></li>
<li>The completed bit should be <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">green</code></li>
<li>The remaining bit should be <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">lightgrey</code></li>
</ul>
You add the CSS to the component using Styled Components or using Inline CSS or adding identifiers and using the <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">App.css</code> file. It's totally up to you
The component should accept a <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">percent</code> prop which is used to determine how many percentage of the progress bar to fill with <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">green</code> colour.
We have already written some code for you in the <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">App.jsx</code> file.
<img loading="lazy" alt="image" src="https://wsrv.nl/?url=https%3A%2F%2Fcodedamn-website-assets.s3.us-east-1.amazonaws.com%2Fuploads%2F06-2023%2Fimage.SXQZpBBMgnCvw-jCtJBLl.png&amp;w=1920&amp;q=75&amp;output=webp">
<blockquote>
Do not edit the <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">data-testid </code>attributes that are present in the component, these are used for testing your code
</blockquote>

Progress Bar