5bd314deb2
- Phase 1-5: UI framework, auth, weapon schemes, color filters, system optimization - Industrial/tech design style with Chinese localization - Points to gch3n.online/delta backend API - Hardware monitor, filter editor, and all module pages
30 lines
1.0 KiB
TypeScript
30 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
|
|
interface ProgressBarProps {
|
|
value: number;
|
|
max?: number;
|
|
label?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export default function ProgressBar({ value, max = 100, label, className = '' }: ProgressBarProps) {
|
|
const pct = Math.min((value / max) * 100, 100);
|
|
|
|
return (
|
|
<div className={`flex items-center gap-3 ${className}`}>
|
|
<div className="flex-1 h-[6px] bg-tactical-dark/90 border border-tactical-gray/40 relative overflow-hidden">
|
|
<div
|
|
className="h-full transition-all duration-500 ease-out relative"
|
|
style={{ width: `${pct}%`, background: 'linear-gradient(90deg, #3A6B35 0%, #5C7A3E 50%, #7A6B4A 100%)' }}
|
|
>
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{ backgroundImage: 'repeating-linear-gradient(90deg, transparent 0px, rgba(255,255,255,0.03) 2px, transparent 4px)' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{label && <span className="text-[11px] font-bold text-tactical-textMuted whitespace-nowrap">{label}</span>}
|
|
</div>
|
|
);
|
|
}
|