82 lines
2.1 KiB
TypeScript
82 lines
2.1 KiB
TypeScript
import { ThemedText } from "@/components/themed-text";
|
|
import { ThemedView } from "@/components/themed-view";
|
|
import { IconSymbol } from "@/components/ui/icon-symbol";
|
|
import { LiveScoreMatch } from "@/types/api";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { StyleSheet, View } from "react-native";
|
|
|
|
interface OtherInfoCardProps {
|
|
match: LiveScoreMatch;
|
|
isDark: boolean;
|
|
}
|
|
|
|
export function OtherInfoCard({ match, isDark }: OtherInfoCardProps) {
|
|
const { t } = useTranslation();
|
|
const iconColor = isDark ? "#888" : "#999";
|
|
|
|
// 模拟气象数据，因为当前 API 响应中未直接包含这些字段
|
|
const weather = {
|
|
temp: "25°C",
|
|
wind: "3.4m/s",
|
|
humidity: "31%",
|
|
};
|
|
|
|
return (
|
|
<ThemedView style={[styles.container, isDark && styles.darkContainer]}>
|
|
<ThemedText style={styles.title}>
|
|
{t("detail.other_info.title")}
|
|
</ThemedText>
|
|
|
|
<View style={styles.infoRow}>
|
|
<IconSymbol name="thermometer-outline" size={24} color={iconColor} />
|
|
<ThemedText style={styles.infoText}>{weather.temp}</ThemedText>
|
|
</View>
|
|
|
|
<View style={styles.infoRow}>
|
|
<IconSymbol name="leaf-outline" size={24} color={iconColor} />
|
|
<ThemedText style={styles.infoText}>{weather.wind}</ThemedText>
|
|
</View>
|
|
|
|
<View style={styles.infoRow}>
|
|
<IconSymbol name="water-outline" size={24} color={iconColor} />
|
|
<ThemedText style={styles.infoText}>{weather.humidity}</ThemedText>
|
|
</View>
|
|
</ThemedView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
margin: 16,
|
|
borderRadius: 20,
|
|
backgroundColor: "#FFF",
|
|
padding: 20,
|
|
marginBottom: 20,
|
|
shadowColor: "#000",
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 10,
|
|
elevation: 2,
|
|
},
|
|
darkContainer: {
|
|
backgroundColor: "#1E1E20",
|
|
shadowOpacity: 0,
|
|
elevation: 0,
|
|
},
|
|
title: {
|
|
fontSize: 16,
|
|
color: "#666",
|
|
marginBottom: 20,
|
|
},
|
|
infoRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 15,
|
|
marginBottom: 16,
|
|
},
|
|
infoText: {
|
|
fontSize: 18,
|
|
fontWeight: "500",
|
|
},
|
|
});
|