73e8372b0e
- Bulk replace text-white → text-foreground across 116 component files (preserving text-white/ opacity variants) - Remove hover-glow-cyan, shadow-card-glow-cyan, shadow-button-primary-glow classes from all components - Replace --duration-normal/--duration-immersive/--duration-slow with --sumi-duration-normal/--sumi-duration-slow across 130+ files - Replace --ease-out/--ease-in-out with --sumi-ease-out/--sumi-ease-in-out - Replace focus:ring-blue-500 → focus:ring-primary (4 files) - Remove hover:scale-105/110 and hover:-translate-y-1/0.5 transforms (SUMI anti-pattern: no scale on hover) - Clean up stale kodo- references in comments 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(--sumi-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>
|
|
);
|
|
};
|