ironie-nextjs/src/app/components/CompRankBadge.tsx
2025-06-19 23:07:19 +02:00

59 lines
1.3 KiB
TypeScript

'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}
sizes="(max-width: 768px) 100px, 70px"
style={{ objectFit: 'contain' }} // ← korrekt!
/>
</Tooltip>
);
}