实现详情页

2026-01-13 09:26:13 +08:00
parent bb6c21496f
commit 9c16586994
13 changed files with 902 additions and 21 deletions
--- a/components/match-detail/match-tabs.tsx
+++ b/components/match-detail/match-tabs.tsx
@@ -0,0 +1,92 @@
+import { ThemedText } from "@/components/themed-text";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { ScrollView, StyleSheet, TouchableOpacity, View } from "react-native";
+
+interface MatchTabsProps {
+  activeTab: string;
+  onTabChange: (tab: string) => void;
+  isDark: boolean;
+}
+
+export function MatchTabs({ activeTab, onTabChange, isDark }: MatchTabsProps) {
+  const { t } = useTranslation();
+  const containerBg = isDark ? "#121212" : "#F8F8F8";
+
+  const tabs = [
+    { id: "info", label: t("detail.tabs.info") },
+    { id: "h2h", label: t("detail.tabs.h2h") },
+    { id: "chat", label: t("detail.tabs.chat") },
+  ];
+
+  return (
+    <View style={[styles.container, { backgroundColor: containerBg }]}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.scrollContent}
+      >
+        {tabs.map((tab) => {
+          const isActive = activeTab === tab.id;
+          return (
+            <TouchableOpacity
+              key={tab.id}
+              onPress={() => onTabChange(tab.id)}
+              style={[
+                styles.tabBtn,
+                isActive && styles.activeTabBtn,
+                isActive && {
+                  backgroundColor: isDark ? "rgba(255,255,255,0.05)" : "#FFF",
+                },
+              ]}
+            >
+              <ThemedText
+                style={[
+                  styles.tabText,
+                  isActive && styles.activeTabText,
+                  isActive && { color: "#FF9800" },
+                ]}
+              >
+                {tab.label}
+              </ThemedText>
+            </TouchableOpacity>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 12,
+  },
+  scrollContent: {
+    paddingHorizontal: 16,
+    gap: 12,
+  },
+  tabBtn: {
+    paddingHorizontal: 20,
+    paddingVertical: 8,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: "transparent",
+  },
+  activeTabBtn: {
+    borderColor: "rgba(255,152,0,0.3)",
+    // Shadow for iOS/Android if needed
+    elevation: 2,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+  },
+  tabText: {
+    fontSize: 14,
+    fontWeight: "500",
+    opacity: 0.6,
+  },
+  activeTabText: {
+    opacity: 1,
+  },
+});