114 lines
3.0 KiB
TypeScript
114 lines
3.0 KiB
TypeScript
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,
|
|
},
|
|
});
|