63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { Trophy, Medal, Star, Crown, Target, Zap } from 'lucide-react';
|
|
import type { DriverProfileAchievementViewModel } from '@/lib/view-models/DriverProfileViewModel';
|
|
|
|
interface AchievementCardProps {
|
|
achievement: DriverProfileAchievementViewModel;
|
|
}
|
|
|
|
function getRarityColor(rarity: DriverProfileAchievementViewModel['rarity']) {
|
|
switch (rarity) {
|
|
case 'common':
|
|
return 'text-gray-400 bg-gray-400/10 border-gray-400/30';
|
|
case 'rare':
|
|
return 'text-primary-blue bg-primary-blue/10 border-primary-blue/30';
|
|
case 'epic':
|
|
return 'text-purple-400 bg-purple-400/10 border-purple-400/30';
|
|
case 'legendary':
|
|
return 'text-yellow-400 bg-yellow-400/10 border-yellow-400/30';
|
|
}
|
|
}
|
|
|
|
function getAchievementIcon(icon: DriverProfileAchievementViewModel['icon']) {
|
|
switch (icon) {
|
|
case 'trophy':
|
|
return Trophy;
|
|
case 'medal':
|
|
return Medal;
|
|
case 'star':
|
|
return Star;
|
|
case 'crown':
|
|
return Crown;
|
|
case 'target':
|
|
return Target;
|
|
case 'zap':
|
|
return Zap;
|
|
}
|
|
}
|
|
|
|
export default function AchievementCard({ achievement }: AchievementCardProps) {
|
|
const Icon = getAchievementIcon(achievement.icon);
|
|
const rarityClasses = getRarityColor(achievement.rarity);
|
|
|
|
return (
|
|
<div className={`p-4 rounded-xl border ${rarityClasses} transition-all hover:scale-105`}>
|
|
<div className="flex items-start gap-3">
|
|
<div className={`flex h-10 w-10 items-center justify-center rounded-lg ${rarityClasses.split(' ')[1]}`}>
|
|
<Icon className={`w-5 h-5 ${rarityClasses.split(' ')[0]}`} />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-white font-semibold text-sm">{achievement.title}</p>
|
|
<p className="text-gray-400 text-xs mt-0.5">{achievement.description}</p>
|
|
<p className="text-gray-500 text-xs mt-1">
|
|
{new Date(achievement.earnedAt).toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
})}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |