127 lines
4.6 KiB
TypeScript
127 lines
4.6 KiB
TypeScript
'use client';
|
|
|
|
import Card from '../ui/Card';
|
|
|
|
interface Achievement {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
icon: string;
|
|
unlockedAt: string;
|
|
rarity: 'common' | 'rare' | 'epic' | 'legendary';
|
|
}
|
|
|
|
const mockAchievements: Achievement[] = [
|
|
{ id: '1', title: 'First Victory', description: 'Won your first race', icon: '🏆', unlockedAt: '2024-03-15', rarity: 'common' },
|
|
{ id: '2', title: '10 Podiums', description: 'Achieved 10 podium finishes', icon: '🥈', unlockedAt: '2024-05-22', rarity: 'rare' },
|
|
{ id: '3', title: 'Clean Racer', description: 'Completed 25 races with 0 incidents', icon: '✨', unlockedAt: '2024-08-10', rarity: 'epic' },
|
|
{ id: '4', title: 'Comeback King', description: 'Won a race after starting P10 or lower', icon: '⚡', unlockedAt: '2024-09-03', rarity: 'rare' },
|
|
{ id: '5', title: 'Perfect Weekend', description: 'Pole, fastest lap, and win in same race', icon: '💎', unlockedAt: '2024-10-17', rarity: 'legendary' },
|
|
{ id: '6', title: 'Century Club', description: 'Completed 100 races', icon: '💯', unlockedAt: '2024-11-01', rarity: 'epic' },
|
|
];
|
|
|
|
const rarityColors = {
|
|
common: 'border-gray-500 bg-gray-500/10',
|
|
rare: 'border-blue-400 bg-blue-400/10',
|
|
epic: 'border-purple-400 bg-purple-400/10',
|
|
legendary: 'border-warning-amber bg-warning-amber/10'
|
|
};
|
|
|
|
export default function CareerHighlights() {
|
|
return (
|
|
<div className="space-y-6">
|
|
<Card>
|
|
<h3 className="text-lg font-semibold text-white mb-4">Key Milestones</h3>
|
|
|
|
<div className="space-y-3">
|
|
<MilestoneItem
|
|
label="First Race"
|
|
value="March 15, 2024"
|
|
icon="🏁"
|
|
/>
|
|
<MilestoneItem
|
|
label="First Win"
|
|
value="March 15, 2024 (Imola)"
|
|
icon="🏆"
|
|
/>
|
|
<MilestoneItem
|
|
label="Highest Rating"
|
|
value="1487 (Nov 2024)"
|
|
icon="📈"
|
|
/>
|
|
<MilestoneItem
|
|
label="Longest Win Streak"
|
|
value="4 races (Oct 2024)"
|
|
icon="🔥"
|
|
/>
|
|
<MilestoneItem
|
|
label="Most Wins (Track)"
|
|
value="Spa-Francorchamps (7)"
|
|
icon="🗺️"
|
|
/>
|
|
<MilestoneItem
|
|
label="Favorite Car"
|
|
value="Porsche 911 GT3 R (45 races)"
|
|
icon="🏎️"
|
|
/>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card>
|
|
<h3 className="text-lg font-semibold text-white mb-4">Achievements</h3>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
{mockAchievements.map((achievement) => (
|
|
<div
|
|
key={achievement.id}
|
|
className={`p-4 rounded-lg border ${rarityColors[achievement.rarity]}`}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div className="text-3xl">{achievement.icon}</div>
|
|
<div className="flex-1">
|
|
<div className="text-white font-medium mb-1">{achievement.title}</div>
|
|
<div className="text-xs text-gray-400 mb-2">{achievement.description}</div>
|
|
<div className="text-xs text-gray-500">
|
|
{new Date(achievement.unlockedAt).toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric'
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="bg-charcoal-200/50 border-primary-blue/30">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<div className="text-2xl">🎯</div>
|
|
<h3 className="text-lg font-semibold text-white">Next Goals</h3>
|
|
</div>
|
|
<div className="space-y-2 text-sm text-gray-400">
|
|
<div className="flex items-center justify-between">
|
|
<span>Win 25 races</span>
|
|
<span className="text-primary-blue">23/25</span>
|
|
</div>
|
|
<div className="w-full bg-deep-graphite rounded-full h-2">
|
|
<div className="bg-primary-blue rounded-full h-2" style={{ width: '92%' }} />
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MilestoneItem({ label, value, icon }: { label: string; value: string; icon: string }) {
|
|
return (
|
|
<div className="flex items-center justify-between p-3 rounded bg-deep-graphite border border-charcoal-outline">
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-xl">{icon}</span>
|
|
<span className="text-gray-400 text-sm">{label}</span>
|
|
</div>
|
|
<span className="text-white text-sm font-medium">{value}</span>
|
|
</div>
|
|
);
|
|
} |