即将到来页面

components/upcoming-match-card.tsx

@@ -0,0 +1,194 @@
+import { ThemedText } from "@/components/themed-text";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { Colors } from "@/constants/theme";
+import { useTheme } from "@/context/ThemeContext";
+import { UpcomingMatch } from "@/types/api";
+import { Image } from "expo-image";
+import { useRouter } from "expo-router";
+import React from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+
+interface UpcomingMatchCardProps {
+  match: UpcomingMatch;
+}
+
+export function UpcomingMatchCard({ match }: UpcomingMatchCardProps) {
+  const router = useRouter();
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+  const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
+  const cardBg = isDark ? "#1C1C1E" : "#FFFFFF";
+  const borderColor = isDark ? "#38383A" : "#E5E5EA";
+
+  const handlePress = () => {
+    router.push(`/match-detail/${match.eventKey}`);
+  };
+
+  // 格式化日期时间
+  const formatDateTime = () => {
+    if (match.eventDate && match.eventTime) {
+      return `${match.eventDate} ${match.eventTime}`;
+    }
+    return match.eventDate || match.eventTime || "";
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      style={({ pressed }) => [
+        styles.card,
+        { backgroundColor: cardBg, borderColor, opacity: pressed ? 0.7 : 1 },
+      ]}
+    >
+      <View style={styles.header}>
+        <View
+          style={[
+            styles.leagueBadge,
+            { backgroundColor: isDark ? "#2C2C2E" : "#F2F2F7" },
+          ]}
+        >
+          {match.leagueLogo && (
+            <Image
+              source={{ uri: match.leagueLogo }}
+              style={styles.leagueLogo}
+              contentFit="contain"
+            />
+          )}
+          <ThemedText style={styles.leagueText} numberOfLines={1}>
+            {match.leagueName}
+          </ThemedText>
+        </View>
+        <ThemedText style={styles.timeText}>{formatDateTime()}</ThemedText>
+      </View>
+
+      <View style={styles.teamsContainer}>
+        <View style={styles.team}>
+          {match.homeTeamLogo && (
+            <Image
+              source={{ uri: match.homeTeamLogo }}
+              style={styles.teamLogo}
+              contentFit="contain"
+            />
+          )}
+          <ThemedText type="defaultSemiBold" style={styles.teamName} numberOfLines={1}>
+            {match.homeTeamName}
+          </ThemedText>
+        </View>
+
+        <View style={styles.vsContainer}>
+          <ThemedText style={styles.vsText}>VS</ThemedText>
+        </View>
+
+        <View style={styles.team}>
+          {match.awayTeamLogo && (
+            <Image
+              source={{ uri: match.awayTeamLogo }}
+              style={styles.teamLogo}
+              contentFit="contain"
+            />
+          )}
+          <ThemedText type="defaultSemiBold" style={styles.teamName} numberOfLines={1}>
+            {match.awayTeamName}
+          </ThemedText>
+        </View>
+      </View>
+
+      {(match.venue || match.round) && (
+        <View style={styles.metaContainer}>
+          {match.venue && (
+            <View style={styles.metaItem}>
+              <IconSymbol name="location-outline" size={12} color={iconColor} />
+              <ThemedText style={styles.metaText}>{match.venue}</ThemedText>
+            </View>
+          )}
+          {match.round && (
+            <View style={styles.metaItem}>
+              <ThemedText style={styles.metaText}>{match.round}</ThemedText>
+            </View>
+          )}
+        </View>
+      )}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    padding: 12,
+    marginBottom: 12,
+    borderRadius: 12,
+    borderWidth: 1,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 12,
+  },
+  leagueBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+    flex: 1,
+    marginRight: 8,
+  },
+  leagueLogo: {
+    width: 16,
+    height: 16,
+    marginRight: 4,
+  },
+  leagueText: {
+    fontSize: 12,
+    opacity: 0.7,
+    flex: 1,
+  },
+  timeText: {
+    fontSize: 12,
+    opacity: 0.5,
+  },
+  teamsContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 8,
+  },
+  team: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  teamLogo: {
+    width: 24,
+    height: 24,
+    marginRight: 8,
+  },
+  teamName: {
+    fontSize: 14,
+    flex: 1,
+  },
+  vsContainer: {
+    paddingHorizontal: 12,
+  },
+  vsText: {
+    fontSize: 12,
+    opacity: 0.5,
+    fontWeight: "600",
+  },
+  metaContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: 8,
+    marginTop: 4,
+  },
+  metaItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+  },
+  metaText: {
+    fontSize: 11,
+    opacity: 0.5,
+  },
+});