empty placeholder

components/match-detail/basketball/basketball-score-table.tsx

@@ -1,3 +1,4 @@
+import { EmptyPlaceholder } from "@/components/empty-placeholder";
 import { ThemedText } from "@/components/themed-text";
 import { MatchDetailData } from "@/types/api";
 import React from "react";
@@ -143,7 +144,9 @@ export function BasketballScoreTable({
           <View style={styles.teamCell}>
             {row.logo && row.logo.trim() !== "" && !row.logo.includes("placehold") ? (
               <Image source={{ uri: row.logo }} style={styles.teamLogo} />
-            ) : null}
+            ) : (
+              <EmptyPlaceholder type="team" size={28} />
+            )}
             <ThemedText style={[styles.teamName, { color: textColor }]} numberOfLines={1}>
               {row.name}
             </ThemedText>

components/match-detail/basketball/basketball-stats.tsx

@@ -1,9 +1,8 @@
+import { EmptyPlaceholder } from "@/components/empty-placeholder";
 import { ThemedText } from "@/components/themed-text";
 import { IconSymbol } from "@/components/ui/icon-symbol";
-import { getInitials, getLogoGradient } from "@/lib/avatar-utils";
 import { MatchDetailData } from "@/types/api";
 import { Image } from "expo-image";
-import { LinearGradient } from "expo-linear-gradient";
 import React, { useMemo, useState } from "react";
 import {
   ScrollView,
@@ -161,10 +160,6 @@ export function BasketballStats({ data, isDark }: BasketballStatsProps) {
   const awayTeamLogo = match.awayTeamLogo || "";
   const hasHomeLogo = homeTeamLogo && homeTeamLogo.trim() !== "" && !homeTeamLogo.includes("placehold");
   const hasAwayLogo = awayTeamLogo && awayTeamLogo.trim() !== "" && !awayTeamLogo.includes("placehold");
-  const homeGradient = getLogoGradient(homeTeamName);
-  const awayGradient = getLogoGradient(awayTeamName);
-  const homeInitials = getInitials(homeTeamName);
-  const awayInitials = getInitials(awayTeamName);
 
   return (
     <View style={[styles.container, { backgroundColor: bgColor }]}>
@@ -199,12 +194,7 @@ export function BasketballStats({ data, isDark }: BasketballStatsProps) {
           {hasHomeLogo ? (
             <Image source={{ uri: homeTeamLogo }} style={styles.teamTabLogo} contentFit="contain" />
           ) : (
-            <LinearGradient
-              colors={[homeGradient.color1, homeGradient.color2]}
-              style={styles.teamTabLogoGradient}
-            >
-              <ThemedText style={styles.teamTabLogoText}>{homeInitials}</ThemedText>
-            </LinearGradient>
+            <EmptyPlaceholder type="team" size={24} />
           )}
         </TouchableOpacity>
         <TouchableOpacity
@@ -218,12 +208,7 @@ export function BasketballStats({ data, isDark }: BasketballStatsProps) {
           {hasAwayLogo ? (
             <Image source={{ uri: awayTeamLogo }} style={styles.teamTabLogo} contentFit="contain" />
           ) : (
-            <LinearGradient
-              colors={[awayGradient.color1, awayGradient.color2]}
-              style={styles.teamTabLogoGradient}
-            >
-              <ThemedText style={styles.teamTabLogoText}>{awayInitials}</ThemedText>
-            </LinearGradient>
+            <EmptyPlaceholder type="team" size={24} />
           )}
         </TouchableOpacity>
       </View>

components/match-detail/football/football-score-table.tsx

@@ -1,3 +1,4 @@
+import { EmptyPlaceholder } from "@/components/empty-placeholder";
 import { ThemedText } from "@/components/themed-text";
 import { MatchDetailData } from "@/types/api";
 import React from "react";
@@ -89,7 +90,11 @@ export function FootballScoreTable({ data, isDark }: FootballScoreTableProps) {
       {rows.map((row, idx) => (
         <View key={idx} style={[styles.row, idx === 0 && styles.rowBorder]}>
           <View style={styles.teamCell}>
-            <Image source={{ uri: row.logo }} style={styles.teamLogo} />
+            {row.logo && row.logo.trim() !== "" && !row.logo.includes("placehold") ? (
+              <Image source={{ uri: row.logo }} style={styles.teamLogo} />
+            ) : (
+              <EmptyPlaceholder type="team" size={28} />
+            )}
             <ThemedText style={styles.teamName} numberOfLines={1}>
               {row.name}
             </ThemedText>

components/match-detail/league-info.tsx

@@ -1,3 +1,4 @@
+import { EmptyPlaceholder } from "@/components/empty-placeholder";
 import { ThemedText } from "@/components/themed-text";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { MatchDetailData } from "@/types/api";
@@ -25,12 +26,10 @@ export function LeagueInfo({ data, isDark }: LeagueInfoProps) {
       activeOpacity={0.7}
     >
       <View style={styles.left}>
-        {match.leagueLogo ? (
+        {match.leagueLogo && match.leagueLogo.trim() !== "" && !match.leagueLogo.includes("placehold") ? (
           <Image source={{ uri: match.leagueLogo }} style={styles.leagueLogo} />
         ) : (
-          <View style={[styles.fallbackLogo, { backgroundColor: "#333" }]}>
-            <IconSymbol name="trophy-outline" size={14} color="#AAA" />
-          </View>
+          <EmptyPlaceholder type="league" size={24} />
         )}
         <ThemedText style={[styles.leagueName, { color: textColor }]}>
           {match.leagueName}

components/match-detail/score-header.tsx

@@ -1,7 +1,7 @@
+import { EmptyPlaceholder } from "@/components/empty-placeholder";
 import { ThemedText } from "@/components/themed-text";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { addFavorite, checkFavorite, removeFavorite } from "@/lib/api";
-import { getInitials, getLogoGradient } from "@/lib/avatar-utils";
 import { storage } from "@/lib/storage";
 import { MatchDetailData } from "@/types/api";
 import { LinearGradient } from "expo-linear-gradient";
@@ -170,10 +170,6 @@ export function ScoreHeader({ data, isDark, topInset }: ScoreHeaderProps) {
 
   const hasFirstLogo = firstPlayerLogo && firstPlayerLogo.trim() !== "" && !firstPlayerLogo.includes("placehold");
   const hasSecondLogo = secondPlayerLogo && secondPlayerLogo.trim() !== "" && !secondPlayerLogo.includes("placehold");
-  const firstGradient = getLogoGradient(firstPlayerName || "");
-  const secondGradient = getLogoGradient(secondPlayerName || "");
-  const firstInitials = getInitials(firstPlayerName || "");
-  const secondInitials = getInitials(secondPlayerName || "");
 
   return (
     <LinearGradient
@@ -243,14 +239,7 @@ export function ScoreHeader({ data, isDark, topInset }: ScoreHeaderProps) {
                   style={styles.teamLogo}
                 />
               ) : (
-                <LinearGradient
-                  colors={[firstGradient.color1, firstGradient.color2]}
-                  start={{ x: 0, y: 0 }}
-                  end={{ x: 1, y: 1 }}
-                  style={styles.teamLogoGradient}
-                >
-                  <ThemedText style={styles.teamLogoText}>{firstInitials}</ThemedText>
-                </LinearGradient>
+                <EmptyPlaceholder type={isTennis ? "player" : "team"} size={60} />
               )}
             </View>
           </View>
@@ -283,14 +272,7 @@ export function ScoreHeader({ data, isDark, topInset }: ScoreHeaderProps) {
                   style={styles.teamLogo}
                 />
               ) : (
-                <LinearGradient
-                  colors={[secondGradient.color1, secondGradient.color2]}
-                  start={{ x: 0, y: 0 }}
-                  end={{ x: 1, y: 1 }}
-                  style={styles.teamLogoGradient}
-                >
-                  <ThemedText style={styles.teamLogoText}>{secondInitials}</ThemedText>
-                </LinearGradient>
+                <EmptyPlaceholder type={isTennis ? "player" : "team"} size={60} />
               )}
             </View>
             <TouchableOpacity