127 lines
3.7 KiB
TypeScript
127 lines
3.7 KiB
TypeScript
import {StyleSheet, Platform, ScrollView, SafeAreaView, View, StatusBar, Text} from 'react-native';
|
|
// @ts-ignore
|
|
import CalendarPicker from 'react-native-calendar-picker';
|
|
|
|
import {ThemedText} from '@/components/ThemedText';
|
|
import {ThemedView} from '@/components/ThemedView';
|
|
import {Colors} from '@/constants/Colors';
|
|
import {useColorScheme} from '@/hooks/useColorScheme';
|
|
import React from 'react';
|
|
import Ionicons from '@expo/vector-icons/Ionicons';
|
|
|
|
export default function HomeScreen() {
|
|
const colorScheme = useColorScheme() ?? 'light';
|
|
|
|
return (
|
|
<SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background,}}>
|
|
<ThemedView style={styles.container}>
|
|
<ScrollView>
|
|
<ThemedView style={styles.titleContainer}>
|
|
<ThemedText type="title">{ getGreeting() },</ThemedText>
|
|
</ThemedView>
|
|
|
|
<ThemedView style={styles.titleContainer}>
|
|
<ThemedText type="title" style={{color: Colors[colorScheme].tint}}>Maarten</ThemedText>
|
|
</ThemedView>
|
|
|
|
<ThemedView style={styles.calendarContainer}>
|
|
<CalendarPicker
|
|
showDayStragglers={true}
|
|
enableDateChange={false}
|
|
previousComponent={
|
|
<Ionicons size={28} name="chevron-back" />
|
|
}
|
|
nextComponent={
|
|
<Ionicons size={28} name="chevron-forward" />
|
|
}
|
|
weekdays={["Zo", "Ma", "Di", "Woe", "Do", "Vrij", "Zat"]}
|
|
months={[
|
|
"Januari",
|
|
"Februari",
|
|
"Maart",
|
|
"April",
|
|
"Mei",
|
|
"Juni",
|
|
"Juli",
|
|
"Augustus",
|
|
"September",
|
|
"Oktober",
|
|
"November",
|
|
"December",
|
|
]}
|
|
/>
|
|
</ThemedView>
|
|
|
|
<ThemedView style={styles.legendaContainer}>
|
|
<View style={styles.legendaItem}>
|
|
<View style={{...styles.circle, backgroundColor: Colors[colorScheme].green}}/>
|
|
<ThemedText type="default">GFT+e</ThemedText>
|
|
</View>
|
|
<View style={styles.legendaItem}>
|
|
<View style={{...styles.circle, backgroundColor: Colors[colorScheme].paper}}/>
|
|
<ThemedText type="default">Papier</ThemedText>
|
|
</View>
|
|
<View style={styles.legendaItem}>
|
|
<View style={{...styles.circle, backgroundColor: Colors[colorScheme].packages}}/>
|
|
<ThemedText type="default">PMD</ThemedText>
|
|
</View>
|
|
<View style={styles.legendaItem}>
|
|
<View style={{...styles.circle, backgroundColor: Colors[colorScheme].grey}}/>
|
|
<ThemedText type="default">Restafval</ThemedText>
|
|
</View>
|
|
</ThemedView>
|
|
</ScrollView>
|
|
</ThemedView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
function getGreeting() {
|
|
const myDate = new Date();
|
|
const hours = myDate.getHours();
|
|
|
|
if (hours < 12) {
|
|
return 'Goedemorgen';
|
|
} else if (hours >= 12 && hours <= 17) {
|
|
return 'Goedemiddag';
|
|
} else if (hours >= 17 && hours <= 24) {
|
|
return 'Goedenavond';
|
|
}
|
|
|
|
return 'Hallo';
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
padding: 25,
|
|
marginTop: StatusBar.currentHeight,
|
|
},
|
|
titleContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
paddingBottom: 8,
|
|
},
|
|
calendarContainer: {
|
|
marginTop: 15,
|
|
},
|
|
legendaContainer: {
|
|
marginTop: 25,
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignContent: 'center',
|
|
gap: 10,
|
|
},
|
|
legendaItem: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
flexGrow: 1,
|
|
},
|
|
circle: {
|
|
width: 25,
|
|
height: 25,
|
|
borderRadius: 50,
|
|
},
|
|
});
|