fa56dfa77e
- Replace all kodo-* color classes across ~100 TSX files: kodo-void → background, kodo-ink → card, kodo-graphite → muted, kodo-steel → muted-foreground, kodo-cyan → primary, kodo-magenta → destructive, kodo-lime → success, kodo-red → destructive, kodo-gold → warning - Replace cyan-500, magenta-500, lime-500 default Tailwind colors with semantic equivalents (primary, destructive, success) - Fix WaveformVisualizer hardcoded hex colors to SUMI values - Delete global-effects.css (conflicting, redundant with index.css) Co-authored-by: Cursor <cursoragent@cursor.com>
73 lines
2 KiB
TypeScript
73 lines
2 KiB
TypeScript
import React from 'react';
|
|
|
|
interface XPBarProps {
|
|
currentXP: number;
|
|
nextLevelXP: number;
|
|
level: number;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
showLabels?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export const XPBar: React.FC<XPBarProps> = ({
|
|
currentXP,
|
|
nextLevelXP,
|
|
level,
|
|
size = 'md',
|
|
showLabels = true,
|
|
className = '',
|
|
}) => {
|
|
const percentage = Math.min(
|
|
100,
|
|
Math.max(0, (currentXP / nextLevelXP) * 100),
|
|
);
|
|
|
|
const heightClasses = {
|
|
sm: 'h-2',
|
|
md: 'h-4',
|
|
lg: 'h-6',
|
|
};
|
|
|
|
const textClasses = {
|
|
sm: 'text-xs',
|
|
md: 'text-xs',
|
|
lg: 'text-sm',
|
|
};
|
|
|
|
return (
|
|
<div className={`w-full ${className}`}>
|
|
{showLabels && (
|
|
<div
|
|
className={`flex justify-between items-end mb-1 font-mono font-bold ${textClasses[size]}`}
|
|
>
|
|
<span className="text-warning">LVL {level}</span>
|
|
<span className="text-muted-foreground">
|
|
<span className="text-foreground">{currentXP}</span> / {nextLevelXP} XP
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
className={`w-full bg-muted rounded-full overflow-hidden border border-warning/30 ${heightClasses[size]} relative`}
|
|
>
|
|
{/* Background Pattern */}
|
|
<div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-20"></div>
|
|
|
|
{/* Progress Fill */}
|
|
<div
|
|
className="h-full bg-gradient-to-r from-sumi-gold/80 to-warning transition-all duration-[var(--duration-slow)] shadow-gold-glow relative"
|
|
style={{ width: `${percentage}%` }}
|
|
>
|
|
{/* Shimmer Effect */}
|
|
<div className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white/20 to-transparent -skew-x-12 translate-x-[-100%] animate-shimmer"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{showLabels && size === 'lg' && (
|
|
<div className="text-right text-xs text-muted-foreground mt-1 font-mono">
|
|
{Math.round(nextLevelXP - currentXP)} XP to next level
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|