empty placeholder

components/matches-by-league.tsx

@@ -1,12 +1,11 @@
+import { EmptyPlaceholder } from "@/components/empty-placeholder";
 import { MatchCardLeague } from "@/components/match-card-league";
 import { ThemedText } from "@/components/themed-text";
 import { Colors } from "@/constants/theme";
 import { useTheme } from "@/context/ThemeContext";
 import { fetchLeagues, fetchTodayMatches } from "@/lib/api";
-import { getInitials, getLogoGradient } from "@/lib/avatar-utils";
 import { League, Match } from "@/types/api";
 import { Image } from "expo-image";
-import { LinearGradient } from "expo-linear-gradient";
 import React, { useState } from "react";
 import {
   ActivityIndicator,
@@ -212,8 +211,6 @@ export function MatchesByLeague({
               <View style={styles.leagueHeaderLeft}>
                 {(() => {
                   const hasLogo = league.logo && league.logo.trim() !== "" && !league.logo.includes("placehold");
-                  const gradient = getLogoGradient(league.name || "");
-                  const initials = getInitials(league.name || "");
 
                   return hasLogo ? (
                     <Image
@@ -221,14 +218,7 @@ export function MatchesByLeague({
                       style={[styles.leagueLogo, { backgroundColor: isDark ? "#3A3A3C" : "#E5E5E5" }]}
                     />
                   ) : (
-                    <LinearGradient
-                      colors={[gradient.color1, gradient.color2]}
-                      start={{ x: 0, y: 0 }}
-                      end={{ x: 1, y: 1 }}
-                      style={styles.leagueLogoGradient}
-                    >
-                      <ThemedText style={styles.leagueLogoText}>{initials}</ThemedText>
-                    </LinearGradient>
+                    <EmptyPlaceholder type="league" size={32} />
                   );
                 })()}