实现直播详情页

components/live-detail/live-league-info.tsx

@@ -0,0 +1,90 @@
+import { ThemedText } from "@/components/themed-text";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { LiveScoreMatch } from "@/types/api";
+import React from "react";
+import { Image, StyleSheet, TouchableOpacity, View } from "react-native";
+
+interface LiveLeagueInfoProps {
+  match: LiveScoreMatch;
+}
+
+export function LiveLeagueInfo({ match }: LiveLeagueInfoProps) {
+  // Force dark style for this component to match the header design language
+  const bgColor = "#121212";
+  const borderColor = "rgba(255,255,255,0.1)";
+  const textColor = "#FFF";
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.container,
+        { backgroundColor: bgColor, borderBottomColor: borderColor },
+      ]}
+      activeOpacity={0.7}
+    >
+      <View style={styles.left}>
+        {match.league_logo ? (
+          <Image
+            source={{ uri: match.league_logo }}
+            style={styles.leagueLogo}
+          />
+        ) : (
+          <View style={[styles.fallbackLogo, { backgroundColor: "#333" }]}>
+            <IconSymbol name="trophy-outline" size={14} color="#AAA" />
+          </View>
+        )}
+        <ThemedText style={[styles.leagueName, { color: textColor }]}>
+          {match.league_name}
+        </ThemedText>
+      </View>
+      <View style={styles.right}>
+        <ThemedText style={styles.roundText}>
+          {match.league_round || ""}
+        </ThemedText>
+        <IconSymbol name="chevron-forward" size={16} color="#888" />
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    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",
+  },
+  right: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  roundText: {
+    fontSize: 12,
+    color: "#888",
+    marginRight: 8,
+  },
+});