harden media

apps/website/components/leagues/LeagueCard.tsx

@@ -14,7 +14,8 @@ import {
 } from 'lucide-react';
 import type { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
 import { getLeagueCoverClasses } from '@/lib/leagueCovers';
-import { useServices } from '@/lib/services/ServiceProvider';
+import PlaceholderImage from '@/components/ui/PlaceholderImage';
+import { getMediaUrl } from '@/lib/utilities/media';
 
 interface LeagueCardProps {
   league: LeagueSummaryViewModel;
@@ -114,9 +115,8 @@ function isNewLeague(createdAt: string | Date): boolean {
 }
 
 export default function LeagueCard({ league, onClick }: LeagueCardProps) {
-  const { mediaService } = useServices();
-  const coverUrl = mediaService.getLeagueCover(league.id);
-  const logoUrl = mediaService.getLeagueLogo(league.id);
+  const coverUrl = getMediaUrl('league-cover', league.id);
+  const logoUrl = league.logoUrl;
   
   const ChampionshipIcon = getChampionshipIcon(league.scoring?.primaryChampionshipType);
   const championshipLabel = getChampionshipLabel(league.scoring?.primaryChampionshipType);
@@ -190,15 +190,19 @@ export default function LeagueCard({ league, onClick }: LeagueCardProps) {
           {/* Logo */}
           <div className="absolute left-4 -bottom-6 z-10">
             <div className="w-12 h-12 rounded-lg overflow-hidden border-2 border-iron-gray bg-deep-graphite shadow-xl">
-              <img
-                src={logoUrl}
-                alt={`${league.name} logo`}
-                width={48}
-                height={48}
-                className="h-full w-full object-cover"
-                loading="lazy"
-                decoding="async"
-              />
+              {logoUrl ? (
+                <img
+                  src={logoUrl}
+                  alt={`${league.name} logo`}
+                  width={48}
+                  height={48}
+                  className="h-full w-full object-cover"
+                  loading="lazy"
+                  decoding="async"
+                />
+              ) : (
+                <PlaceholderImage size={48} />
+              )}
             </div>
           </div>
         </div>