实现直播详情页

components/live-detail/other-info-card.tsx

@@ -0,0 +1,81 @@
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { LiveScoreMatch } from "@/types/api";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { StyleSheet, View } from "react-native";
+
+interface OtherInfoCardProps {
+  match: LiveScoreMatch;
+  isDark: boolean;
+}
+
+export function OtherInfoCard({ match, isDark }: OtherInfoCardProps) {
+  const { t } = useTranslation();
+  const iconColor = isDark ? "#888" : "#999";
+
+  // 模拟气象数据，因为当前 API 响应中未直接包含这些字段
+  const weather = {
+    temp: "25°C",
+    wind: "3.4m/s",
+    humidity: "31%",
+  };
+
+  return (
+    <ThemedView style={[styles.container, isDark && styles.darkContainer]}>
+      <ThemedText style={styles.title}>
+        {t("detail.other_info.title")}
+      </ThemedText>
+
+      <View style={styles.infoRow}>
+        <IconSymbol name="thermometer-outline" size={24} color={iconColor} />
+        <ThemedText style={styles.infoText}>{weather.temp}</ThemedText>
+      </View>
+
+      <View style={styles.infoRow}>
+        <IconSymbol name="leaf-outline" size={24} color={iconColor} />
+        <ThemedText style={styles.infoText}>{weather.wind}</ThemedText>
+      </View>
+
+      <View style={styles.infoRow}>
+        <IconSymbol name="water-outline" size={24} color={iconColor} />
+        <ThemedText style={styles.infoText}>{weather.humidity}</ThemedText>
+      </View>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    margin: 16,
+    borderRadius: 20,
+    backgroundColor: "#FFF",
+    padding: 20,
+    marginBottom: 20,
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowRadius: 10,
+    elevation: 2,
+  },
+  darkContainer: {
+    backgroundColor: "#1E1E20",
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  title: {
+    fontSize: 16,
+    color: "#666",
+    marginBottom: 20,
+  },
+  infoRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 15,
+    marginBottom: 16,
+  },
+  infoText: {
+    fontSize: 18,
+    fontWeight: "500",
+  },
+});