search.tsx use-debounce

app/(root)/(tabs)/index.tsx

@@ -1,20 +1,26 @@
 import { Link } from "expo-router";
-import { Text, View } from "react-native";
+import {Image, SafeAreaView, Text, View} from "react-native";
+import images from "@/constants/images";
+import icons from "@/constants/icons";
+import search from "@/components/Search";
+import Search from "@/components/Search";
 
 export default function Index() {
   return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <Text className="font-bold my-10 uppercase">Welcome to mobile.mk</Text>
-      {/*<Link href="/signin">SignIn</Link>*/}
-      {/*<Link href="/explore">explore</Link>*/}
-      {/*<Link href="/profile">profile</Link>*/}
-      {/*<Link href="/cars/1">car</Link>*/}
-    </View>
+      <SafeAreaView className={'bg-white h-full'}>
+          <View className={'px-5'}>
+              <Search />
+              <View className={'flex flex-row items-center justify-between mt-5'}>
+                  <View className={'flex flex-row items-cente'}>
+                      <Image source={images.car1} className={'rounded-full size-24'}/>
+                      <View className={'flex flex-col items-start ml-2 justify-center'}>
+                          <Text>good morning</Text>
+                          <Text>pero</Text>
+                      </View>
+                  </View>
+                  <Image source={icons.bell} className={'size-6'}/>
+              </View>
+          </View>
+      </SafeAreaView>
   );
 }

app/(root)/(tabs)/profile.tsx

@@ -1,10 +1,39 @@
-import {View, Text, SafeAreaView, ScrollView, Image, TouchableOpacity} from "react-native";
+import {View, Text, SafeAreaView, ScrollView, Image, TouchableOpacity, ImageSourcePropType, Alert} from "react-native";
 import React from "react";
 import icons from "@/constants/icons"
 import images from "@/constants/images";
+import {settings} from "@/constants/data";
+import {useGlobalContext} from "@/lib/globalProvider";
+import {logOut} from "@/lib/appwrite";
+import {parseJson} from "ajv/dist/runtime/parseJson";
+import message = parseJson.message;
+
+interface  SettingsItemsProps{
+    icon: ImageSourcePropType,
+    title: string,
+    onPress?: () => void,
+    textStyle?: string,
+    showArrow?: boolean,
+}
+const SettingsItems = ({icon, title, onPress, textStyle, showArrow = true } : SettingsItemsProps) => (
+    <TouchableOpacity onPress={onPress} className={'flex flex-row justify-between py-3'}>
+        <View className={'flex flex-row items-center gap-3'}>
+            <Image source={icon} className={'size-6'}/>
+            <Text>{title}</Text>
+        </View>
+        {showArrow && <Image source={icons.rightArrow} className={'size-5'}/>}
+    </TouchableOpacity>
+)
 
 const Profile = () => {
-    const handleLogout = async () => {};
+    const {user, refetch} = useGlobalContext();
+    const handleLogout = async () => {
+        const result = await logOut();
+        if(result) {
+            Alert.alert('logged out')
+            refetch();
+        }
+    };
   return (
     <SafeAreaView className={'h-full bg-white'}>
         <ScrollView
@@ -16,13 +45,28 @@ const Profile = () => {
             </View>
             <View className={'flex flex-row justify-center mt-5'}>
                 <View className={'flex flex-col items-center relative mt-5'}>
-                    <Image source={images.car1} className={'size-44 relative rounded-full'}/>
+                    <Image source={{uri: user?.avatar}}className={'size-44 relative rounded-full'}/>
                     <TouchableOpacity className={'absolute bottom-11 right-2'}>
                         <Image source={icons.edit} className={'size-9'}/>
                     </TouchableOpacity>
-                    <Text>Dimitar -- test</Text>
+                    <Text>{ user?.name}</Text>
                 </View>
             </View>
+
+            <View className={'flex flex-col mt-10'}>
+                <SettingsItems icon = {icons.calendar} title={'MyCars - Возила'}/>
+                <SettingsItems icon = {icons.wallet} title={'Payments- Плаќања'}/>
+            </View>
+
+            <View className={'flex flex-col mt-5 border-t pt-5 border-blue-200'}>
+                {settings.slice(2).map((item, index ) => (
+                    <SettingsItems key={index} {...item}/>
+                ) )}
+            </View>
+
+            <View className={'flex flex-col mt-5 border-t pt-5 border-blue-200'}>
+                <SettingsItems icon={icons.logout} title={'Logout - Одјависе'} onPress={handleLogout} showArrow={false}/>
+            </View>
         </ScrollView>
     </SafeAreaView>
   );