73 lines
No EOL
1.9 KiB
TypeScript
73 lines
No EOL
1.9 KiB
TypeScript
import React from 'react'
|
|
import { Image, Text, View, ViewProps } from 'react-native'
|
|
import { TouchableOpacity } from 'react-native-gesture-handler'
|
|
import { MARGINS, SIZES } from '../../constants/theme'
|
|
import { useTheme } from '../../app/contexts/ThemeContext'
|
|
|
|
type WelcomeProps = ViewProps & {name: string, image : any, onPress: () => void | undefined}
|
|
|
|
function formatDate(date: Date) : string {
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
const year = String(date.getFullYear())
|
|
return `${day}.${month}.${year}`
|
|
}
|
|
|
|
function getTimeOfDay(date: Date) : string {
|
|
const hour = date.getHours()
|
|
if(hour < 12){
|
|
return "morning"
|
|
} else if(hour >= 12 && hour < 18){
|
|
return "afternoon"
|
|
} else if(hour >= 18){
|
|
return "evening"
|
|
}
|
|
return "day"
|
|
}
|
|
|
|
|
|
|
|
export default function Welcome(props: WelcomeProps) {
|
|
const { colors } = useTheme();
|
|
|
|
const date = new Date()
|
|
const dateString = formatDate(date)
|
|
const timeOfDay = getTimeOfDay(date)
|
|
const onpress = props.onPress
|
|
|
|
|
|
return (
|
|
<View style={{
|
|
marginVertical: 20,
|
|
marginHorizontal: MARGINS.normal,
|
|
//backgroundColor: backgroundColor,
|
|
}}>
|
|
<View style={{
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between"
|
|
}}>
|
|
<TouchableOpacity onPress={onpress}>
|
|
<Image style={{
|
|
height: 60,
|
|
width: 60,
|
|
borderRadius: 200,
|
|
|
|
}} source={props.image} height={60} width={60} resizeMode='cover'></Image>
|
|
</TouchableOpacity>
|
|
<Text style={{
|
|
fontSize: SIZES.xlarge,
|
|
color: colors.primaryText
|
|
}}>{dateString}</Text>
|
|
</View>
|
|
<View style={{
|
|
paddingTop: 10,
|
|
}}>
|
|
<Text style={{
|
|
fontSize: SIZES.xlarge,
|
|
color: colors.primaryText
|
|
}}>Good {timeOfDay}, {props.name}</Text>
|
|
</View>
|
|
</View>
|
|
)
|
|
} |