Build mobile apps with an AI that sees your phone

1import { View, Text, SectionList } from 'react-native';
2import { useSchedule } from '@/context/ScheduleContext';
3import { ClassCard } from '@/components/ClassCard';
4import { AddButton } from '@/components/AddButton';
5
6export default function ClassesScreen() {
7  const { classes, remove } = useSchedule();
8  const sections = groupByDay(classes);
9
10  return (
11    <View style={styles.screen}>
12      <View style={styles.header}>
13        <Text style={styles.title}>Classes</Text>
14        <AddButton href="/add-class" />
15      </View>
16      <SectionList
17        sections={sections}
18        renderSectionHeader={({ section }) => (
19          <Text style={styles.day}>{section.day}</Text>
20        )}
21        renderItem={({ item }) => (
22          <ClassCard
23            {...item}
24            onDelete={() => remove(item.id)}
25          />
26        )}
27      />
28    </View>
29  );
30}