实现详情页

components/match-card.tsx

@@ -3,22 +3,34 @@ import { IconSymbol } from "@/components/ui/icon-symbol";
 import { Colors } from "@/constants/theme";
 import { useTheme } from "@/context/ThemeContext";
 import { Match } from "@/types/api";
+import { useRouter } from "expo-router";
 import React from "react";
-import { StyleSheet, View } from "react-native";
+import { Pressable, StyleSheet, View } from "react-native";
 
 interface MatchCardProps {
   match: Match;
 }
 
 export function MatchCard({ match }: MatchCardProps) {
+  const router = useRouter();
   const { theme } = useTheme();
   const isDark = theme === "dark";
   const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
   const cardBg = isDark ? "#1C1C1E" : "#FFFFFF";
   const borderColor = isDark ? "#38383A" : "#E5E5EA";
 
+  const handlePress = () => {
+    router.push(`/match-detail/${match.id}`);
+  };
+
   return (
-    <View style={[styles.card, { backgroundColor: cardBg, borderColor }]}>
+    <Pressable
+      onPress={handlePress}
+      style={({ pressed }) => [
+        styles.card,
+        { backgroundColor: cardBg, borderColor, opacity: pressed ? 0.7 : 1 },
+      ]}
+    >
       <View style={styles.header}>
         <View
           style={[
@@ -52,7 +64,7 @@ export function MatchCard({ match }: MatchCardProps) {
       {match.meta && (
         <ThemedText style={styles.metaText}>{match.meta}</ThemedText>
       )}
-    </View>
+    </Pressable>
   );
 }