harden media

apps/website/components/leaderboards/TeamLeaderboardPreview.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { useRouter } from 'next/navigation';
+import Image from 'next/image';
 import { Users, Crown, Shield, ChevronRight } from 'lucide-react';
 import Button from '@/components/ui/Button';
 import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+import { getMediaUrl } from '@/lib/utilities/media';
 
 interface TeamLeaderboardPreviewProps {
   teams: TeamSummaryViewModel[];
@@ -82,9 +84,15 @@ export default function TeamLeaderboardPreview({ teams, onTeamClick }: TeamLeade
                 {position <= 3 ? <Crown className="w-3.5 h-3.5" /> : position}
               </div>
 
-              {/* Team Icon */}
-              <div className={`flex h-9 w-9 items-center justify-center rounded-lg ${levelConfig?.bgColor} border ${levelConfig?.borderColor}`}>
-                <LevelIcon className={`w-4 h-4 ${levelConfig?.color}`} />
+              {/* Team Logo */}
+              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-charcoal-outline border border-charcoal-outline overflow-hidden">
+                <Image
+                  src={team.logoUrl || getMediaUrl('team-logo', team.id)}
+                  alt={team.name}
+                  width={36}
+                  height={36}
+                  className="w-full h-full object-cover"
+                />
               </div>
 
               {/* Info */}