34 lines
750 B
TypeScript
34 lines
750 B
TypeScript
import React from 'react';
|
|
import { Box, BoxProps } from './primitives/Box';
|
|
|
|
interface ProgressBarProps extends Omit<BoxProps<'div'>, 'children'> {
|
|
value: number;
|
|
max: number;
|
|
color?: string;
|
|
bg?: string;
|
|
height?: string;
|
|
}
|
|
|
|
export function ProgressBar({
|
|
value,
|
|
max,
|
|
color = 'bg-primary-blue',
|
|
bg = 'bg-deep-graphite',
|
|
height = '2',
|
|
...props
|
|
}: ProgressBarProps) {
|
|
const percentage = Math.min((value / max) * 100, 100);
|
|
|
|
return (
|
|
<Box fullWidth bg={bg} rounded="full" height={height} overflow="hidden" {...props}>
|
|
<Box
|
|
bg={color}
|
|
rounded="full"
|
|
fullHeight
|
|
style={{ width: `${percentage}%` }}
|
|
className="transition-all duration-500 ease-out"
|
|
/>
|
|
</Box>
|
|
);
|
|
}
|