增加联赛选择模态框

components/league-modal.tsx

@@ -0,0 +1,209 @@
+import { ThemedText } from "@/components/themed-text";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { Colors } from "@/constants/theme";
+import { useTheme } from "@/context/ThemeContext";
+import { League } from "@/types/api";
+import { Image } from "expo-image";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Modal, Pressable, ScrollView, StyleSheet, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+interface LeagueModalProps {
+  visible: boolean;
+  onClose: () => void;
+  leagues: League[];
+  selectedLeagueKey: string | null;
+  onSelect: (leagueKey: string) => void;
+}
+
+export function LeagueModal({
+  visible,
+  onClose,
+  leagues,
+  selectedLeagueKey,
+  onSelect,
+}: LeagueModalProps) {
+  const { theme } = useTheme();
+  const { t } = useTranslation();
+  const isDark = theme === "dark";
+  const bg = isDark ? "#1C1C1E" : "#FFFFFF";
+  const text = isDark ? "#FFFFFF" : "#000000";
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+    >
+      <Pressable style={styles.overlay} onPress={onClose}>
+        <View />
+      </Pressable>
+
+      <View style={[styles.sheet, { backgroundColor: bg }]}>
+        <SafeAreaView edges={["bottom"]}>
+          <View style={styles.header}>
+            <ThemedText type="subtitle" style={styles.title}>
+              {t("home.select_league")}
+            </ThemedText>
+            <Pressable onPress={onClose} style={styles.closeButton}>
+              <IconSymbol name="close" size={24} color={text} />
+            </Pressable>
+          </View>
+          <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
+            {leagues.length === 0 ? (
+              <View style={styles.emptyContainer}>
+                <ThemedText style={styles.emptyText}>
+                  {t("home.no_leagues")}
+                </ThemedText>
+              </View>
+            ) : (
+              leagues.map((league) => {
+                const isSelected = selectedLeagueKey === league.key;
+                const optionBg = isDark ? "#2C2C2E" : "#F5F5F5";
+                const iconBg = isDark ? "#3A3A3C" : "#E5E5EA";
+
+                return (
+                  <Pressable
+                    key={league.id}
+                    style={[
+                      styles.option,
+                      { backgroundColor: optionBg },
+                    ]}
+                    onPress={() => {
+                      onSelect(league.key);
+                      onClose();
+                    }}
+                  >
+                    {/* 左侧图标 */}
+                    <View style={[styles.iconContainer, { backgroundColor: iconBg }]}>
+                      {league.logo ? (
+                        <Image
+                          source={{ uri: league.logo }}
+                          style={styles.leagueLogo}
+                          contentFit="contain"
+                        />
+                      ) : (
+                        <IconSymbol name="trophy-outline" size={24} color={text} />
+                      )}
+                    </View>
+
+                    {/* 中间内容 */}
+                    <View style={styles.content}>
+                      <ThemedText
+                        style={[
+                          styles.leagueName,
+                          { fontWeight: isSelected ? "600" : "400" },
+                        ]}
+                      >
+                        {league.name}
+                      </ThemedText>
+                      {league.countryName && (
+                        <ThemedText style={styles.countryName}>
+                          {league.countryName}
+                        </ThemedText>
+                      )}
+                    </View>
+
+                    {/* 右侧指示点 */}
+                    <View
+                      style={[
+                        styles.indicator,
+                        {
+                          backgroundColor: isSelected
+                            ? Colors.light.tint
+                            : isDark
+                              ? "#666666"
+                              : "#CCCCCC",
+                        },
+                      ]}
+                    />
+                  </Pressable>
+                );
+              })
+            )}
+          </ScrollView>
+        </SafeAreaView>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.5)",
+  },
+  sheet: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    padding: 20,
+    height: "55%",
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 20,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "600",
+  },
+  closeButton: {
+    width: 32,
+    height: 32,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  scrollView: {
+    maxHeight: 400,
+  },
+  emptyContainer: {
+    padding: 40,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  emptyText: {
+    fontSize: 16,
+    opacity: 0.6,
+  },
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    marginBottom: 12,
+    borderRadius: 12,
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 12,
+  },
+  leagueLogo: {
+    width: 32,
+    height: 32,
+  },
+  content: {
+    flex: 1,
+  },
+  leagueName: {
+    fontSize: 16,
+    marginBottom: 4,
+  },
+  countryName: {
+    fontSize: 12,
+    opacity: 0.6,
+  },
+  indicator: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginLeft: 12,
+  },
+});