extract components from website

apps/website/components/achievements/AchievementCard.tsx

@@ -0,0 +1,63 @@
+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>
+  );
+}