实现详情页

components/match-detail/match-info-card.tsx

@@ -0,0 +1,62 @@
+import { ThemedText } from "@/components/themed-text";
+import { MatchDetailData } from "@/types/api";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { StyleSheet, View } from "react-native";
+
+interface MatchInfoCardProps {
+  data: MatchDetailData;
+  isDark: boolean;
+}
+
+export function MatchInfoCard({ data, isDark }: MatchInfoCardProps) {
+  const { t } = useTranslation();
+  const { match } = data;
+  const bgColor = isDark ? "#1C1C1E" : "#FFF";
+
+  return (
+    <View style={[styles.container, { backgroundColor: bgColor }]}>
+      <ThemedText style={styles.title}>
+        {t("detail.info_card.title")}
+      </ThemedText>
+
+      <View style={styles.content}>
+        <ThemedText style={styles.leagueName}>{match.leagueName}</ThemedText>
+        <ThemedText style={styles.dateTime}>
+          {match.eventDate} • {match.eventTime}
+        </ThemedText>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    margin: 16,
+    marginTop: 0,
+    borderRadius: 12,
+    padding: 16,
+    elevation: 2,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#666",
+    marginBottom: 16,
+  },
+  content: {
+    gap: 4,
+  },
+  leagueName: {
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  dateTime: {
+    fontSize: 14,
+    opacity: 0.6,
+  },
+});