117 lines
3.1 KiB
TypeScript
117 lines
3.1 KiB
TypeScript
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;
|
|
sportId: number;
|
|
}
|
|
|
|
export function MatchTabs({ activeTab, onTabChange, isDark, sportId }: MatchTabsProps) {
|
|
const { t } = useTranslation();
|
|
const containerBg = isDark ? "#121212" : "#F8F8F8";
|
|
|
|
// 根据 sportId 动态生成标签
|
|
const getTabs = () => {
|
|
if (sportId === 1) {
|
|
// 足球: 详情、统计数据、赔率、交锋往绩、聊天
|
|
return [
|
|
{ id: "info", label: t("detail.tabs.info") },
|
|
{ id: "stats", label: t("detail.tabs.stats") },
|
|
{ id: "odds", label: t("detail.tabs.odds") },
|
|
{ id: "h2h", label: t("detail.tabs.h2h") },
|
|
{ id: "chat", label: t("detail.tabs.chat") },
|
|
];
|
|
} else if (sportId === 2) {
|
|
// 篮球: 详情、交锋往绩、聊天
|
|
return [
|
|
{ id: "info", label: t("detail.tabs.info") },
|
|
{ id: "h2h", label: t("detail.tabs.h2h") },
|
|
{ id: "chat", label: t("detail.tabs.chat") },
|
|
];
|
|
}
|
|
// 默认: 详情、交锋往绩、聊天
|
|
return [
|
|
{ id: "info", label: t("detail.tabs.info") },
|
|
{ id: "h2h", label: t("detail.tabs.h2h") },
|
|
{ id: "chat", label: t("detail.tabs.chat") },
|
|
];
|
|
};
|
|
|
|
const tabs = getTabs();
|
|
|
|
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,
|
|
},
|
|
});
|