43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { useTheme } from '../../contexts/ThemeContext';
|
||
|
|
|
||
|
|
interface ProgressBarProps {
|
||
|
|
percent: number;
|
||
|
|
color?: 'accent' | 'green' | 'orange' | 'red';
|
||
|
|
showLabel?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const ProgressBar: React.FC<ProgressBarProps> = ({
|
||
|
|
percent,
|
||
|
|
color = 'accent',
|
||
|
|
showLabel = false,
|
||
|
|
}) => {
|
||
|
|
const { theme } = useTheme();
|
||
|
|
|
||
|
|
const colorStyles = {
|
||
|
|
accent: theme.gradientAccent,
|
||
|
|
green: `linear-gradient(90deg, ${theme.green}, #00ff88)`,
|
||
|
|
orange: `linear-gradient(90deg, ${theme.orange}, #ffaa00)`,
|
||
|
|
red: '#ff4444',
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div
|
||
|
|
className="h-2 rounded-full flex-1"
|
||
|
|
style={{ backgroundColor: theme.bgHover }}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="h-full rounded-full transition-all duration-300"
|
||
|
|
style={{
|
||
|
|
width: `${percent}%`,
|
||
|
|
background: colorStyles[color],
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
{showLabel && (
|
||
|
|
<span className="font-mono text-xs text-t-accent">{percent}%</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|