31 lines
617 B
TypeScript
31 lines
617 B
TypeScript
import { Box } from './../elements/LayoutPrimitives'
|
|
|
|
type ProgressBarProps = {
|
|
fillPercentage: number
|
|
fillColor: string
|
|
backgroundColor: string
|
|
borderRadius: string
|
|
}
|
|
|
|
export function ProgressBar(props: ProgressBarProps): JSX.Element {
|
|
return (
|
|
<Box
|
|
css={{
|
|
height: '4px',
|
|
width: '100%',
|
|
borderRadius: '$1',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<Box
|
|
css={{
|
|
height: '100%',
|
|
width: `${props.fillPercentage}%`,
|
|
backgroundColor: props.fillColor,
|
|
borderRadius: props.borderRadius,
|
|
}}
|
|
/>
|
|
</Box>
|
|
)
|
|
}
|