feat: profile and greetings

components/home/Welcome/Welcome.tsx

@@ -0,0 +1,66 @@
+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'
+
+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
+
+  return (
+    <View style={{
+      marginVertical: 20,
+      marginHorizontal: MARGINS.normal,
+    }}>
+      <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,
+        }}>{dateString}</Text>
+      </View>
+      <View style={{
+        paddingTop: 10,
+      }}>
+        <Text style={{
+          fontSize: SIZES.xlarge,
+        }}>Good {timeOfDay}, {props.name}</Text>
+        </View>
+    </View>
+  )
+}