55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import { Box } from './Box';
|
|
|
|
export interface ProgressBarProps {
|
|
value: number;
|
|
max?: number;
|
|
intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
|
|
color?: string; // Alias for intent
|
|
size?: 'sm' | 'md' | 'lg';
|
|
marginBottom?: any;
|
|
mb?: any; // Alias for marginBottom
|
|
}
|
|
|
|
export const ProgressBar = ({
|
|
value,
|
|
max = 100,
|
|
intent = 'primary',
|
|
color: colorProp,
|
|
size = 'md',
|
|
marginBottom,
|
|
mb
|
|
}: ProgressBarProps) => {
|
|
const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
|
|
|
|
const intentColorMap = {
|
|
primary: 'var(--ui-color-intent-primary)',
|
|
success: 'var(--ui-color-intent-success)',
|
|
warning: 'var(--ui-color-intent-warning)',
|
|
critical: 'var(--ui-color-intent-critical)',
|
|
telemetry: 'var(--ui-color-intent-telemetry)',
|
|
};
|
|
|
|
const color = colorProp || intentColorMap[intent];
|
|
|
|
const sizeMap = {
|
|
sm: '0.25rem',
|
|
md: '0.5rem',
|
|
lg: '1rem',
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
fullWidth
|
|
bg="var(--ui-color-bg-surface-muted)"
|
|
style={{ height: sizeMap[size], borderRadius: '9999px', overflow: 'hidden' }}
|
|
marginBottom={marginBottom || mb}
|
|
>
|
|
<Box
|
|
fullHeight
|
|
bg={color}
|
|
style={{ width: `${percentage}%`, transition: 'width 0.3s ease-in-out' }}
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|