实现详情页

components/match-detail/league-info.tsx

@@ -0,0 +1,84 @@
+import { ThemedText } from "@/components/themed-text";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { MatchDetailData } from "@/types/api";
+import React from "react";
+import { Image, StyleSheet, TouchableOpacity, View } from "react-native";
+
+interface LeagueInfoProps {
+  data: MatchDetailData;
+  isDark: boolean;
+}
+
+export function LeagueInfo({ data, isDark }: LeagueInfoProps) {
+  const { match } = data;
+  const bgColor = isDark ? "#1C1C1E" : "#FFF";
+  const borderColor = isDark ? "#2C2C2E" : "#EEE";
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.container,
+        { backgroundColor: bgColor, borderBottomColor: borderColor },
+      ]}
+      activeOpacity={0.7}
+    >
+      <View style={styles.left}>
+        {match.leagueLogo ? (
+          <Image source={{ uri: match.leagueLogo }} style={styles.leagueLogo} />
+        ) : (
+          <View
+            style={[
+              styles.fallbackLogo,
+              { backgroundColor: isDark ? "#333" : "#F0F0F0" },
+            ]}
+          >
+            <IconSymbol
+              name="trophy-outline"
+              size={14}
+              color={isDark ? "#AAA" : "#888"}
+            />
+          </View>
+        )}
+        <ThemedText style={styles.leagueName}>{match.leagueName}</ThemedText>
+      </View>
+      <IconSymbol
+        name="chevron-forward"
+        size={16}
+        color={isDark ? "#666" : "#CCC"}
+      />
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+  },
+  left: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  leagueLogo: {
+    width: 24,
+    height: 24,
+    resizeMode: "contain",
+    marginRight: 8,
+  },
+  fallbackLogo: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 8,
+  },
+  leagueName: {
+    fontSize: 14,
+    fontWeight: "500",
+  },
+});