添加板球比赛详情

2026-01-23 16:54:24 +08:00
parent dad06dd27d
commit 665d5b883c
13 changed files with 1214 additions and 52 deletions
--- a/components/match-detail/cricket/cricket-match-info-card.tsx
+++ b/components/match-detail/cricket/cricket-match-info-card.tsx
@@ -0,0 +1,120 @@
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { MatchDetailData } from "@/types/api";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { StyleSheet, View } from "react-native";
+
+interface CricketMatchInfoCardProps {
+  data: MatchDetailData;
+  isDark: boolean;
+}
+
+export function CricketMatchInfoCard({
+  data,
+  isDark,
+}: CricketMatchInfoCardProps) {
+  const { t } = useTranslation();
+  const { match } = data;
+
+  const infoItems = [
+    {
+      icon: "business" as const,
+      label: t("detail.info_card.stadium"), // "名称" (Name) in screenshot
+      value: match.eventStadium,
+    },
+    {
+      icon: "location-sharp" as const,
+      label: t("detail.info_card.country"), // "地点" (Location) in screenshot - using country/city if available
+      value: match.countryName || match.leagueName, // JSON has empty countryName in example, maybe leagueName or city? Example "Windhoek" is a city. API usually has `eventCity`? `Untitled-1` doesn't show city. Use what we have.
+    },
+    // Capacity missing in JSON, skipping.
+    {
+      icon: "calendar-outline" as const,
+      label: t("detail.info_card.date"),
+      value: match.eventDateStart || match.eventDate,
+    },
+    {
+      icon: "information-circle-outline" as const,
+      label: t("detail.info_card.toss"),
+      value: match.eventToss,
+    },
+  ].filter((item) => item.value && item.value.trim() !== "");
+
+  if (infoItems.length === 0) return null;
+
+  return (
+    <ThemedView
+      style={[
+        styles.container,
+        { backgroundColor: isDark ? "#1E1E20" : "#FFF" },
+      ]}
+    >
+      <ThemedText style={[styles.title, { color: isDark ? "#CCC" : "#666" }]}>
+        {t("detail.info_card.title")}
+      </ThemedText>
+
+      <View style={styles.content}>
+        {infoItems.map((item, index) => (
+          <View key={index} style={styles.row}>
+            <View style={styles.leftContainer}>
+              <IconSymbol
+                name={item.icon}
+                size={20}
+                color={isDark ? "#888" : "#999"}
+              />
+              <ThemedText style={styles.label}>{item.label}</ThemedText>
+            </View>
+            <ThemedText style={styles.value} numberOfLines={2}>
+              {item.value}
+            </ThemedText>
+          </View>
+        ))}
+      </View>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    margin: 16,
+    marginBottom: 32, // bottom spacer
+    borderRadius: 12,
+    padding: 16,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "bold",
+    marginBottom: 20,
+  },
+  content: {
+    gap: 20,
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  leftContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  label: {
+    color: "#888",
+    fontSize: 14,
+    width: 60, // Fixed width for alignment like in screenshot
+  },
+  value: {
+    fontSize: 14,
+    fontWeight: "500",
+    flex: 1,
+    textAlign: "right",
+  },
+});