marker: start working on cards

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

@@ -1,27 +1,38 @@
 import { Link } from "expo-router";
-import {Image, SafeAreaView, Text, View} from "react-native";
+import {Image, SafeAreaView, Text, TouchableOpacity, View} from "react-native";
 import images from "@/constants/images";
 import icons from "@/constants/icons";
 import search from "@/components/Search";
 import Search from "@/components/Search";
+import {useGlobalContext} from "@/lib/globalProvider";
 
 export default function Index() {
+// create func that determines the time od day [morning, evening, night]
+    const {user, refetch} = useGlobalContext();
   return (
       <SafeAreaView className={'bg-white h-full'}>
           <View className={'px-5'}>
               <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 className={'flex flex-row items-center'}>
+                      <Image source={{uri: user?.avatar}} className={'rounded-full size-12'}/>
+                      <View className={'flex flex-col items-start ml-4 justify-center'}>
+                          <Text className={'capitalize'}>good morning</Text>
+                          <Text className={'capitalize font-bold'}>{user?.name}</Text>
                       </View>
                   </View>
                   <Image source={icons.bell} className={'size-6'}/>
               </View>
-          </View>
 
               <Search />
+              <View className={'my-5'}>
+                  <View className={'flex flex-row items-center justify-between'}>
+                      <Text className={'capitalize font-bold text-base'}>featured</Text>
+                      <TouchableOpacity>
+                          <Text className={'capitalize text-base text-blue-500'}>see all</Text>
+                      </TouchableOpacity>
+                  </View>
+          </View>
+          </View>
       </SafeAreaView>
   );
 }

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

@@ -6,7 +6,6 @@ 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,

components/Cards.tsx

@@ -0,0 +1,11 @@
+import {View, Text} from 'react-native'
+import React from 'react'
+
+const Cards = () => {
+    return (
+        <View>
+            <Text>Cards</Text>
+        </View>
+    )
+}
+export default Cards

components/Search.tsx

@@ -1,16 +1,25 @@
-import {View, Text, TextInput, SafeAreaView, Image} from 'react-native'
+import {View, Text, TextInput, SafeAreaView, Image, TouchableOpacity} from 'react-native'
 import React, {useState} from 'react'
-import {useLocalSearchParams, usePathname} from "expo-router";
+import {router, useLocalSearchParams, usePathname} from "expo-router";
 import icons from "@/constants/icons";
+import {useDebouncedCallback} from "use-debounce";
 
 const Search = () => {
     const path = usePathname();
     const params = useLocalSearchParams<{query?: string}>();
    const [search, setSearch] = useState(params.query);
 
+   // we will optimize search with debounce
+
+    const debounceSearch = useDebouncedCallback(
+        (text: string) => router.setParams({ query: text }),
+        300 // debounce delay in milliseconds
+    );
+
    const handleSearch = (text: string) => {
-       // console.log(search)
-       setSearch(text)
+       console.log(search)
+       setSearch(text);
+       debounceSearch(text)
    }
     return (
         <View className={'flex flex-row items-center justify-between w-full px-4 rounded-lg border border-blue-200 mt-5 py-2'}>
@@ -23,6 +32,9 @@ const Search = () => {
                     style={{flex: 1, marginLeft: 10}}
                 />
             </View>
+            <TouchableOpacity>
+                <Image source={icons.filter} className={'size-5'}/>
+            </TouchableOpacity>
         </View>
     )
 }