实现直播详情页

2026-01-14 18:15:13 +08:00
parent 8dc87c9b29
commit 025b483099
18 changed files with 2497 additions and 347 deletions
--- a/components/live-detail/live-match-tabs.tsx
+++ b/components/live-detail/live-match-tabs.tsx
@@ -0,0 +1,113 @@
+import { ThemedText } from "@/components/themed-text";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { ScrollView, StyleSheet, TouchableOpacity, View } from "react-native";
+
+interface LiveMatchTabsProps {
+  activeTab: string;
+  onTabChange: (tab: string) => void;
+  isDark: boolean;
+}
+
+export function LiveMatchTabs({
+  activeTab,
+  onTabChange,
+  isDark,
+}: LiveMatchTabsProps) {
+  const { t } = useTranslation();
+  const containerBg = isDark ? "#121212" : "#F5F5F5";
+
+  const tabs = [
+    {
+      id: "detail",
+      label: t("detail.tabs.info"),
+      icon: "document-text-outline",
+    },
+    { id: "stats", label: t("detail.tabs.stats"), icon: "stats-chart-outline" },
+    { id: "odds", label: t("detail.tabs.odds"), icon: "cash-outline" },
+    { id: "lineup", label: t("detail.tabs.lineup"), icon: "shirt-outline" },
+    {
+      id: "analysis",
+      label: t("detail.tabs.analysis"),
+      icon: "pie-chart-outline",
+    },
+  ];
+
+  return (
+    <View style={[styles.container, { backgroundColor: containerBg }]}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.scrollContent}
+      >
+        {tabs.map((tab) => {
+          const isActive = activeTab === tab.id;
+          const activeColor = "#FF9800"; // 橙色
+          const inactiveColor = isDark ? "#AAA" : "#666";
+          const inactiveBg = isDark
+            ? "rgba(255,255,255,0.05)"
+            : "rgba(0,0,0,0.03)";
+
+          return (
+            <TouchableOpacity
+              key={tab.id}
+              onPress={() => onTabChange(tab.id)}
+              style={[
+                styles.tabBtn,
+                {
+                  backgroundColor: isActive
+                    ? isDark
+                      ? "#2C2C2E"
+                      : "#FFF"
+                    : inactiveBg,
+                },
+              ]}
+            >
+              <IconSymbol
+                name={tab.icon as any}
+                size={16}
+                color={isActive ? activeColor : inactiveColor}
+                style={{ marginRight: 6 }}
+              />
+              <ThemedText
+                style={[
+                  styles.tabLabel,
+                  {
+                    color: isActive ? activeColor : inactiveColor,
+                    fontWeight: isActive ? "700" : "500",
+                  },
+                ]}
+              >
+                {tab.label}
+              </ThemedText>
+            </TouchableOpacity>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 8,
+  },
+  scrollContent: {
+    paddingHorizontal: 16,
+    gap: 10,
+    alignItems: "center",
+  },
+  tabBtn: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 15,
+    paddingVertical: 6,
+    borderRadius: 20,
+  },
+  tabLabel: {
+    fontSize: 14,
+    includeFontPadding: false,
+  },
+});