实现首页功能，添加体育项目和今日比赛数据的加载，更新国际化文本，新增选择和日历模态框组件

components/simple-calendar.tsx

@@ -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,
+  },
+});