123 lines
3.0 KiB
TypeScript
123 lines
3.0 KiB
TypeScript
import { ThemedText } from "@/components/themed-text";
|
|
import { ThemedView } from "@/components/themed-view";
|
|
import { LiveScoreMatch } from "@/types/api";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { StyleSheet, View } from "react-native";
|
|
|
|
interface OddsCardProps {
|
|
match: LiveScoreMatch;
|
|
isDark: boolean;
|
|
}
|
|
|
|
export function OddsCard({ match, isDark }: OddsCardProps) {
|
|
const { t } = useTranslation();
|
|
// 提取队名缩写或前3个字母
|
|
const homeAbbr =
|
|
match.event_home_team?.substring(0, 3).toUpperCase() || "HOME";
|
|
const awayAbbr =
|
|
match.event_away_team?.substring(0, 3).toUpperCase() || "AWAY";
|
|
|
|
return (
|
|
<ThemedView style={[styles.container, isDark && styles.darkContainer]}>
|
|
<View style={styles.header}>
|
|
<ThemedText style={styles.title}>
|
|
{t("detail.odds_card.title")}
|
|
</ThemedText>
|
|
<View style={styles.badge}>
|
|
<ThemedText style={styles.badgeText}>bet365</ThemedText>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.row}>
|
|
<View style={[styles.item, isDark && styles.darkItem]}>
|
|
<ThemedText style={styles.team}>{homeAbbr}</ThemedText>
|
|
<ThemedText style={styles.odds}>-0.93</ThemedText>
|
|
</View>
|
|
<View style={[styles.item, isDark && styles.darkItem]}>
|
|
<ThemedText style={styles.team}>HDP</ThemedText>
|
|
<ThemedText style={styles.odds}>0/0.5</ThemedText>
|
|
</View>
|
|
<View style={[styles.item, isDark && styles.darkItem]}>
|
|
<ThemedText style={styles.team}>{awayAbbr}</ThemedText>
|
|
<ThemedText style={styles.odds}>0.72</ThemedText>
|
|
</View>
|
|
</View>
|
|
|
|
<ThemedText style={styles.disclaimer}>
|
|
{t("detail.odds_card.disclaimer")}
|
|
</ThemedText>
|
|
</ThemedView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
margin: 16,
|
|
borderRadius: 20,
|
|
padding: 20,
|
|
backgroundColor: "#FFF",
|
|
marginBottom: 16,
|
|
shadowColor: "#000",
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 10,
|
|
elevation: 2,
|
|
},
|
|
darkContainer: {
|
|
backgroundColor: "#1E1E20",
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
marginBottom: 20,
|
|
},
|
|
title: {
|
|
fontSize: 18,
|
|
fontWeight: "500",
|
|
},
|
|
badge: {
|
|
backgroundColor: "#1E4D40",
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 6,
|
|
borderRadius: 8,
|
|
},
|
|
badgeText: {
|
|
color: "#FFF",
|
|
fontSize: 14,
|
|
fontWeight: "bold",
|
|
},
|
|
row: {
|
|
flexDirection: "row",
|
|
gap: 10,
|
|
},
|
|
item: {
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
backgroundColor: "#F8F8F8",
|
|
borderRadius: 10,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 14,
|
|
},
|
|
darkItem: {
|
|
backgroundColor: "rgba(255,255,255,0.05)",
|
|
},
|
|
team: {
|
|
fontSize: 16,
|
|
fontWeight: "500",
|
|
},
|
|
odds: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
color: "#FF9800",
|
|
},
|
|
disclaimer: {
|
|
fontSize: 12,
|
|
color: "#BBB",
|
|
marginTop: 20,
|
|
textAlign: "center",
|
|
},
|
|
});
|