添加板球比赛详情

components/match-detail/cricket/cricket-teams-card.tsx

@@ -0,0 +1,93 @@
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
+import { MatchDetailData } from "@/types/api";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Image, StyleSheet, View } from "react-native";
+
+interface CricketTeamsCardProps {
+  data: MatchDetailData;
+  isDark: boolean;
+}
+
+export function CricketTeamsCard({ data, isDark }: CricketTeamsCardProps) {
+  const { t } = useTranslation();
+  const { match } = data;
+
+  return (
+    <ThemedView
+      style={[
+        styles.container,
+        { backgroundColor: isDark ? "#1E1E20" : "#FFF" },
+      ]}
+    >
+      <ThemedText style={[styles.title, { color: isDark ? "#CCC" : "#666" }]}>
+        {t("detail.teams_card.title")}
+      </ThemedText>
+
+      <View style={styles.content}>
+        {/* Home Team */}
+        <View style={styles.teamRow}>
+          <Image
+            source={{ uri: match.homeTeamLogo }}
+            style={styles.logo}
+            resizeMode="contain"
+          />
+          <ThemedText style={styles.teamName}>{match.eventHomeTeam}</ThemedText>
+        </View>
+
+        <View style={styles.divider} />
+
+        {/* Away Team */}
+        <View style={styles.teamRow}>
+          <Image
+            source={{ uri: match.awayTeamLogo }}
+            style={styles.logo}
+            resizeMode="contain"
+          />
+          <ThemedText style={styles.teamName}>{match.eventAwayTeam}</ThemedText>
+        </View>
+      </View>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    margin: 16,
+    borderRadius: 12,
+    padding: 16,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "bold",
+    marginBottom: 16,
+  },
+  content: {
+    gap: 12,
+  },
+  teamRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+  },
+  logo: {
+    width: 32,
+    height: 32,
+    marginRight: 12,
+  },
+  teamName: {
+    fontSize: 16,
+    fontWeight: "500",
+  },
+  divider: {
+    height: 1,
+    backgroundColor: "#F0F0F0",
+    marginLeft: 44, // Align with text
+  },
+});