实现首页功能，添加体育项目和今日比赛数据的加载，更新国际化文本，新增选择和日历模态框组件
This commit is contained in:
yuchenglong
110
components/match-card.tsx
Normal file
110
components/match-card.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
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 React from "react";
|
||||
import { StyleSheet, View } from "react-native";
|
||||
|
||||
interface MatchCardProps {
|
||||
match: Match;
|
||||
}
|
||||
|
||||
export function MatchCard({ match }: MatchCardProps) {
|
||||
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";
|
||||
|
||||
return (
|
||||
<View style={[styles.card, { backgroundColor: cardBg, borderColor }]}>
|
||||
<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>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
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,
|
||||
},
|
||||
});
|
||||
111
components/selection-modal.tsx
Normal file
111
components/selection-modal.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { Colors } from "@/constants/theme";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
import React from "react";
|
||||
import { Modal, Pressable, ScrollView, StyleSheet, View } from "react-native";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
|
||||
interface SelectionOption {
|
||||
id: number | string;
|
||||
label: string;
|
||||
value: any;
|
||||
}
|
||||
|
||||
interface SelectionModalProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
title: string;
|
||||
options: SelectionOption[];
|
||||
onSelect: (value: any) => void;
|
||||
selectedValue: any;
|
||||
}
|
||||
|
||||
export function SelectionModal({
|
||||
visible,
|
||||
onClose,
|
||||
title,
|
||||
options,
|
||||
onSelect,
|
||||
selectedValue,
|
||||
}: SelectionModalProps) {
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === "dark";
|
||||
const bg = isDark ? "#1C1C1E" : "#FFFFFF";
|
||||
const text = isDark ? "#FFFFFF" : "#000000";
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
transparent
|
||||
animationType="slide"
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
<Pressable style={styles.overlay} onPress={onClose}>
|
||||
<View />
|
||||
</Pressable>
|
||||
|
||||
<View style={[styles.sheet, { backgroundColor: bg }]}>
|
||||
<SafeAreaView edges={["bottom"]}>
|
||||
<View style={styles.header}>
|
||||
<ThemedText type="subtitle">{title}</ThemedText>
|
||||
<Pressable onPress={onClose}>
|
||||
<ThemedText style={{ color: Colors[theme].tint }}>
|
||||
Done
|
||||
</ThemedText>
|
||||
</Pressable>
|
||||
</View>
|
||||
<ScrollView style={{ maxHeight: 300 }}>
|
||||
{options.map((opt) => (
|
||||
<Pressable
|
||||
key={opt.id}
|
||||
style={[
|
||||
styles.option,
|
||||
selectedValue === opt.value && {
|
||||
backgroundColor: isDark ? "#333" : "#F0F0F0",
|
||||
},
|
||||
]}
|
||||
onPress={() => {
|
||||
onSelect(opt.value);
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
<ThemedText
|
||||
style={{
|
||||
fontWeight: selectedValue === opt.value ? "bold" : "normal",
|
||||
}}
|
||||
>
|
||||
{opt.label}
|
||||
</ThemedText>
|
||||
</Pressable>
|
||||
))}
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
overlay: {
|
||||
flex: 1,
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
},
|
||||
sheet: {
|
||||
borderTopLeftRadius: 16,
|
||||
borderTopRightRadius: 16,
|
||||
padding: 16,
|
||||
maxHeight: "60%",
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: 16,
|
||||
},
|
||||
option: {
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: 12,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomColor: "#ccc",
|
||||
},
|
||||
});
|
||||
194
components/simple-calendar.tsx
Normal file
194
components/simple-calendar.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { Colors } from "@/constants/theme";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { Modal, Pressable, StyleSheet, View } from "react-native";
|
||||
|
||||
interface CalendarModalProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
selectedDate: Date;
|
||||
onSelectDate: (date: Date) => void;
|
||||
}
|
||||
|
||||
export function CalendarModal({
|
||||
visible,
|
||||
onClose,
|
||||
selectedDate,
|
||||
onSelectDate,
|
||||
}: CalendarModalProps) {
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === "dark";
|
||||
const bg = isDark ? "#1C1C1E" : "#FFFFFF";
|
||||
|
||||
const [currentMonth, setCurrentMonth] = useState(new Date(selectedDate));
|
||||
|
||||
const daysInMonth = useMemo(() => {
|
||||
const year = currentMonth.getFullYear();
|
||||
const month = currentMonth.getMonth();
|
||||
const date = new Date(year, month, 1);
|
||||
const days = [];
|
||||
while (date.getMonth() === month) {
|
||||
days.push(new Date(date));
|
||||
date.setDate(date.getDate() + 1);
|
||||
}
|
||||
return days;
|
||||
}, [currentMonth]);
|
||||
|
||||
const weekDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
||||
|
||||
// Add empty slots for start of month
|
||||
const startDay = daysInMonth[0]?.getDay() || 0;
|
||||
const blanks = Array(startDay).fill(null);
|
||||
|
||||
const handleDayPress = (date: Date) => {
|
||||
onSelectDate(date);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
transparent
|
||||
animationType="fade"
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
<Pressable style={styles.overlay} onPress={onClose}>
|
||||
<View style={[styles.calendarContainer, { backgroundColor: bg }]}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<Pressable
|
||||
onPress={() =>
|
||||
setCurrentMonth(
|
||||
new Date(
|
||||
currentMonth.getFullYear(),
|
||||
currentMonth.getMonth() - 1,
|
||||
1
|
||||
)
|
||||
)
|
||||
}
|
||||
>
|
||||
<ThemedText style={styles.navText}>{"<"}</ThemedText>
|
||||
</Pressable>
|
||||
<ThemedText type="subtitle">
|
||||
{currentMonth.toLocaleString("default", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</ThemedText>
|
||||
<Pressable
|
||||
onPress={() =>
|
||||
setCurrentMonth(
|
||||
new Date(
|
||||
currentMonth.getFullYear(),
|
||||
currentMonth.getMonth() + 1,
|
||||
1
|
||||
)
|
||||
)
|
||||
}
|
||||
>
|
||||
<ThemedText style={styles.navText}>{">"}</ThemedText>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
{/* Week Headers */}
|
||||
<View style={styles.weekRow}>
|
||||
{weekDays.map((day) => (
|
||||
<ThemedText key={day} style={styles.weekDayText}>
|
||||
{day}
|
||||
</ThemedText>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Days Grid */}
|
||||
<View style={styles.daysGrid}>
|
||||
{blanks.map((_, index) => (
|
||||
<View key={`blank-${index}`} style={styles.dayCell} />
|
||||
))}
|
||||
{daysInMonth.map((date) => {
|
||||
const isSelected =
|
||||
date.getDate() === selectedDate.getDate() &&
|
||||
date.getMonth() === selectedDate.getMonth() &&
|
||||
date.getFullYear() === selectedDate.getFullYear();
|
||||
return (
|
||||
<Pressable
|
||||
key={date.toISOString()}
|
||||
style={[
|
||||
styles.dayCell,
|
||||
isSelected && {
|
||||
backgroundColor: Colors[theme].tint,
|
||||
borderRadius: 20,
|
||||
},
|
||||
]}
|
||||
onPress={() => handleDayPress(date)}
|
||||
>
|
||||
<ThemedText
|
||||
style={[
|
||||
isSelected && { color: "#fff", fontWeight: "bold" },
|
||||
]}
|
||||
>
|
||||
{date.getDate()}
|
||||
</ThemedText>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
|
||||
<Pressable style={styles.closeBtn} onPress={onClose}>
|
||||
<ThemedText>Close</ThemedText>
|
||||
</Pressable>
|
||||
</View>
|
||||
</Pressable>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
overlay: {
|
||||
flex: 1,
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
justifyContent: "center",
|
||||
padding: 20,
|
||||
},
|
||||
calendarContainer: {
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: 20,
|
||||
},
|
||||
navText: {
|
||||
fontSize: 20,
|
||||
padding: 10,
|
||||
},
|
||||
weekRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
marginBottom: 10,
|
||||
},
|
||||
weekDayText: {
|
||||
opacity: 0.5,
|
||||
width: 30,
|
||||
textAlign: "center",
|
||||
fontSize: 12,
|
||||
},
|
||||
daysGrid: {
|
||||
flexDirection: "row",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
dayCell: {
|
||||
width: "14.28%", // 100% / 7
|
||||
aspectRatio: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginBottom: 5,
|
||||
},
|
||||
closeBtn: {
|
||||
alignItems: "center",
|
||||
marginTop: 20,
|
||||
padding: 10,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user