50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
interface DigitalProgressBarProps {
|
|
current: number;
|
|
capacity: number;
|
|
}
|
|
|
|
const BAR_COUNT = 20;
|
|
|
|
function getGlow(index: number): string {
|
|
if (index < 10) return '0 0 8px rgba(239, 68, 68, 0.6)';
|
|
if (index < 18) return '0 0 8px rgba(249, 115, 22, 0.6)';
|
|
return '0 0 8px rgba(34, 197, 94, 0.6)';
|
|
}
|
|
|
|
function getBarColor(index: number): string {
|
|
if (index < 10) return 'bg-red-500';
|
|
if (index < 18) return 'bg-orange-500';
|
|
return 'bg-green-500';
|
|
}
|
|
|
|
export default function DigitalProgressBar({ current, capacity }: DigitalProgressBarProps) {
|
|
const filledBars = capacity > 0
|
|
? Math.min(Math.round((current / capacity) * BAR_COUNT), BAR_COUNT)
|
|
: 0;
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: `repeat(${BAR_COUNT}, 1fr)`,
|
|
gap: '10px',
|
|
height: '2rem',
|
|
}}
|
|
>
|
|
{Array.from({ length: BAR_COUNT }, (_, i) => {
|
|
const filled = i < filledBars;
|
|
return (
|
|
<div
|
|
key={i}
|
|
style={{
|
|
borderRadius: '3px',
|
|
transition: 'background-color 300ms, box-shadow 300ms',
|
|
boxShadow: filled ? getGlow(i) : 'none',
|
|
}}
|
|
className={filled ? getBarColor(i) : 'bg-red-500/10'}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|