58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
// CompRankBadge.tsx
|
|
'use client';
|
|
import Image from 'next/image';
|
|
import Tooltip from './Tooltip';
|
|
|
|
type Props = { rank: number | null };
|
|
|
|
const rankNames: Record<number, string> = {
|
|
1: 'Silver I',
|
|
2: 'Silver II',
|
|
3: 'Silver III',
|
|
4: 'Silver IV',
|
|
5: 'Silver Elite',
|
|
6: 'Silver Elite Master',
|
|
7: 'Gold Nova I',
|
|
8: 'Gold Nova II',
|
|
9: 'Gold Nova III',
|
|
10: 'Gold Nova Master',
|
|
11: 'Master Guardian I',
|
|
12: 'Master Guardian II',
|
|
13: 'Master Guardian Elite',
|
|
14: 'Distinguished Master Guardian',
|
|
15: 'Legendary Eagle',
|
|
16: 'Legendary Eagle Master',
|
|
17: 'Supreme Master First Class',
|
|
18: 'Global Elite',
|
|
9999: 'Rank Expired',
|
|
};
|
|
|
|
export default function CompRankBadge({ rank }: Props) {
|
|
let imageName = 'skillgroup_none.webp';
|
|
let altText = 'No Rank';
|
|
if (typeof rank === 'number') {
|
|
if (rank >= 1 && rank <= 18) {
|
|
imageName = `skillgroup${rank}.webp`;
|
|
altText = rankNames[rank];
|
|
} else if (rank === 9999) {
|
|
imageName = 'skillgroup_expired.webp';
|
|
altText = rankNames[9999];
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Tooltip content={altText}>
|
|
<Image
|
|
src={`/assets/img/skillgroups/${imageName}`}
|
|
alt={altText}
|
|
width={60}
|
|
height={60}
|
|
// Wichtig: feste Höhe für die Zeile, Breite auto
|
|
className="inline-block align-middle h-7 w-auto" // h-7 = 28px
|
|
sizes="70px"
|
|
style={{ objectFit: 'contain' }}
|
|
/>
|
|
</Tooltip>
|
|
);
|
|
}
|