73 lines
No EOL
2 KiB
TypeScript
73 lines
No EOL
2 KiB
TypeScript
import { View, Text, ViewProps, Image, GestureResponderEvent } from 'react-native'
|
|
import React from 'react'
|
|
import { MARGINS, SIZES, SHADOWS } from '../../../constants/theme'
|
|
import { TouchableOpacity } from 'react-native-gesture-handler'
|
|
import { useThemeColor } from '../../../hooks/hooks'
|
|
|
|
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 date = new Date()
|
|
const dateString = formatDate(date)
|
|
const timeOfDay = getTimeOfDay(date)
|
|
const onpress = props.onPress
|
|
|
|
const textcolor = useThemeColor("primaryText")
|
|
//const backgroundColor: string = useThemeColor("backgroundColor")
|
|
|
|
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: textcolor
|
|
}}>{dateString}</Text>
|
|
</View>
|
|
<View style={{
|
|
paddingTop: 10,
|
|
}}>
|
|
<Text style={{
|
|
fontSize: SIZES.xlarge,
|
|
color: textcolor
|
|
}}>Good {timeOfDay}, {props.name}</Text>
|
|
</View>
|
|
</View>
|
|
)
|
|
} |