First commit

apk/components/birthdate-list.tsx

@@ -0,0 +1,127 @@
+// birthdate-list.tsx
+import { useRouter } from "expo-router";
+import {
+  SectionList,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { BirthdayItem } from "./birthdate-item";
+
+const DATA = [
+  { id: "1", name: "John Doe", date: "2024-01-15" },
+  { id: "2", name: "Jane Smith", date: "2024-01-15" },
+  { id: "3", name: "Bob Johnson", date: "2024-02-10" },
+  { id: "4", name: "Alice Brown", date: "2024-02-10" },
+  { id: "5", name: "Charlie Wilson", date: "2024-01-20" },
+  { id: "6", name: "Bob Johnson", date: "2024-02-10" },
+  { id: "7", name: "Alice Brown", date: "2024-02-10" },
+  { id: "8", name: "Charlie Wilson", date: "2024-01-20" },
+  { id: "9", name: "Bob Johnson", date: "2024-02-10" },
+  { id: "10", name: "Alice Brown", date: "2024-02-10" },
+  { id: "11", name: "Charlie Wilson", date: "2024-01-20" },
+  { id: "12", name: "Charlie Wilson", date: "2024-01-20" },
+  { id: "13", name: "Charlie Wilson", date: "2024-01-20" },
+  { id: "14", name: "Charlie Wilson", date: "2024-01-20" },
+];
+
+interface BirthdayItemData {
+  id: string;
+  name: string;
+  date: string;
+}
+
+interface SectionData {
+  title: string;
+  data: BirthdayItemData[];
+}
+
+export function BirthdayList() {
+  const router = useRouter();
+  const groupedData = groupBirthdaysByDate(DATA);
+
+  return (
+    <View>
+      <View style={styles.titleContainer}>
+        <Text style={{ fontSize: 24, fontWeight: "bold" }}>
+          Upcoming Birthdays
+        </Text>
+        <TouchableOpacity
+          onPress={() => router.push("/add")}
+          style={styles.addButton}
+        >
+          <Text style={styles.addButtonText}>+</Text>
+        </TouchableOpacity>
+      </View>
+
+      <SectionList
+        sections={groupedData}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <BirthdayItem name={item.name} date={item.date} />
+        )}
+        showsVerticalScrollIndicator={false}
+        renderSectionHeader={({ section: { title } }) => (
+          <View style={styles.headerContainer}>
+            <Text style={styles.sectionHeader}>{title}</Text>
+          </View>
+        )}
+      />
+    </View>
+  );
+}
+
+// Helper function to group and sort
+function groupBirthdaysByDate(data: BirthdayItemData[]): SectionData[] {
+  // Sort by date
+  const sorted = [...data].sort((a, b) => {
+    return new Date(a.date).getTime() - new Date(b.date).getTime();
+  });
+
+  // Group by date
+  const grouped = sorted.reduce((acc, item) => {
+    const existing = acc.find((section) => section.title === item.date);
+
+    if (existing) {
+      existing.data.push(item);
+    } else {
+      acc.push({ title: item.date, data: [item] });
+    }
+
+    return acc;
+  }, [] as SectionData[]);
+
+  return grouped;
+}
+
+const styles = StyleSheet.create({
+  titleContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 5,
+    paddingVertical: 10,
+  },
+  addButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: "#007AFF",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  addButtonText: {
+    fontSize: 24,
+    color: "white",
+    fontWeight: "bold",
+  },
+  headerContainer: {
+    paddingVertical: 10,
+    paddingHorizontal: 5,
+  },
+  sectionHeader: {
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+});