34 lines
729 B
TypeScript
34 lines
729 B
TypeScript
import { Box } from './../elements/LayoutPrimitives'
|
|
|
|
type ProgressBarVProps = {
|
|
fillPercentage: number
|
|
fillColor: string
|
|
backgroundColor: string
|
|
borderRadius: string
|
|
height?: string
|
|
}
|
|
|
|
export function ProgressBarVertical(props: ProgressBarVProps): JSX.Element {
|
|
return (
|
|
<Box
|
|
css={{
|
|
height: props.height ?? '100%',
|
|
width: '2px',
|
|
borderRadius: '$1',
|
|
overflow: 'hidden',
|
|
backgroundColor: props.backgroundColor,
|
|
mr: '12px',
|
|
}}
|
|
>
|
|
<Box
|
|
css={{
|
|
height: `${props.fillPercentage}%`,
|
|
width: '100%',
|
|
backgroundColor: props.fillColor,
|
|
borderRadius: props.borderRadius,
|
|
}}
|
|
/>
|
|
</Box>
|
|
)
|
|
}
|