123 lines
2.9 KiB
TypeScript
123 lines
2.9 KiB
TypeScript
import { ThemedText } from "@/components/themed-text";
|
|
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 { 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 (
|
|
<Pressable
|
|
onPress={handlePress}
|
|
style={({ pressed }) => [
|
|
styles.card,
|
|
{ backgroundColor: cardBg, borderColor, opacity: pressed ? 0.7 : 1 },
|
|
]}
|
|
>
|
|
<View style={styles.header}>
|
|
<View
|
|
style={[
|
|
styles.leagueBadge,
|
|
{ backgroundColor: isDark ? "#2C2C2E" : "#F2F2F7" },
|
|
]}
|
|
>
|
|
<ThemedText style={styles.leagueText} numberOfLines={1}>
|
|
{match.league}
|
|
</ThemedText>
|
|
</View>
|
|
<ThemedText style={styles.timeText}>{match.time}</ThemedText>
|
|
</View>
|
|
|
|
<View style={styles.teamsContainer}>
|
|
<ThemedText type="defaultSemiBold" style={styles.teamsText}>
|
|
{match.home} vs {match.away}
|
|
</ThemedText>
|
|
<View style={styles.scoreContainer}>
|
|
<ThemedText type="defaultSemiBold" style={styles.scoreText}>
|
|
{match.scoreText}
|
|
</ThemedText>
|
|
<IconSymbol
|
|
name={match.fav ? "star" : "star-outline"}
|
|
size={20}
|
|
color={match.fav ? "#FFD700" : iconColor}
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
{match.meta && (
|
|
<ThemedText style={styles.metaText}>{match.meta}</ThemedText>
|
|
)}
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
padding: 12,
|
|
marginBottom: 12,
|
|
borderRadius: 12,
|
|
borderWidth: 1,
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: 8,
|
|
},
|
|
leagueBadge: {
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 4,
|
|
borderRadius: 4,
|
|
marginRight: 8,
|
|
maxWidth: "70%",
|
|
},
|
|
leagueText: {
|
|
fontSize: 12,
|
|
opacity: 0.7,
|
|
},
|
|
timeText: {
|
|
fontSize: 12,
|
|
opacity: 0.5,
|
|
},
|
|
teamsContainer: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
marginBottom: 4,
|
|
},
|
|
teamsText: {
|
|
fontSize: 16,
|
|
flex: 1,
|
|
marginRight: 8,
|
|
},
|
|
scoreContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 12,
|
|
},
|
|
scoreText: {
|
|
fontSize: 16,
|
|
},
|
|
metaText: {
|
|
fontSize: 12,
|
|
opacity: 0.5,
|
|
marginTop: 4,
|
|
},
|
|
});
|