image picker, form

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

@@ -7,87 +7,109 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
-import images from "@/constants/images";
+// import images from "@/constants/images";
 import icons from "@/constants/icons";
 import Search from "@/components/Search";
 import { useGlobalContext } from "@/lib/globalProvider";
 import { Card, FeaturedCard } from "@/components/Cards";
 import Filters from "@/components/Filters";
+// import { cars, featuredCars } from "@/constants/data";
+import { router } from 'expo-router';
+import { useEffect, useState } from "react";
+import { getCars, getFeaturedCars } from "@/lib/database";
 
 export default function Index() {
-  // create func that determines the time od day [morning, evening, night]
   const { user, refetch } = useGlobalContext();
+  const [cars, setCars] = useState<any[]>([]);
+  const [featuredCars, setFeaturedCars] = useState<any[]>([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [allCars, featured] = await Promise.all([
+          getCars(),
+          getFeaturedCars()
+        ]);
+        setCars(allCars);
+        setFeaturedCars(featured);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
   return (
     <SafeAreaView className={"bg-white h-full"}>
       <FlatList
-        data={[5, 6, 7, 8]}
-        renderItem={({ item }) => <Card />}
-        keyExtractor={(item) => item.toString()}
+        data={cars}
+        renderItem={({ item }) => <Card data={item} />}
+        keyExtractor={(item) => item.$id}
         numColumns={2}
-        contentContainerClassName={"pb-32"}
-        columnWrapperClassName={"flex flex-row gap-5 px-5"}
-        showsVerticalScrollIndicator={false}
         ListHeaderComponent={
-          <View className={"px-4"}>
-            <View className={"flex flex-row items-center justify-between mt-5"}>
-              <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>
+            {/* User Info */}
+            <View className="px-5 pt-5 flex-row items-center justify-between">
+              <View>
+                <Text className="text-2xl font-bold">Welcome back,</Text>
+                <Text className="text-lg text-gray-500">{user?.name}</Text>
               </View>
-              <Image source={icons.bell} className={"size-6"} />
+              <TouchableOpacity>
+                <Image 
+                  source={{ uri: user?.avatar }} 
+                  className="w-12 h-12 rounded-full"
+                />
+              </TouchableOpacity>
             </View>
 
-            <Search />
+            {/* Search */}
+            <View className="px-5 mt-5">
+              <Search />
+            </View>
+
+            {/* Featured Section */}
             <View className={"my-5"}>
               <View className={"flex flex-row items-center justify-between"}>
-                <Text className={"capitalize font-bold text-base"}>
-                  featured
-                </Text>
+                <Text className={"capitalize font-bold text-base"}>featured</Text>
                 <TouchableOpacity>
-                  <Text className={"capitalize text-base text-blue-500"}>
-                    see all
-                  </Text>
+                  <Text className={"capitalize text-base text-blue-500"}>see all</Text>
                 </TouchableOpacity>
               </View>
               <FlatList
-                data={[1, 2, 3]}
-                renderItem={({ item }) => <FeaturedCard />}
-                keyExtractor={(item) => item.toString()}
+                data={featuredCars}
+                renderItem={({ item }) => <FeaturedCard data={item} />}
+                keyExtractor={(item) => item.$id}
                 horizontal={true}
                 bounces={false}
                 showsHorizontalScrollIndicator={false}
                 contentContainerClassName={"flex gap-3 mt-5"}
               />
-              {/*<View className={'flex flex-row gap-5 mt-5'}>*/}
-              {/*    <FeaturedCard/>*/}
-              {/*    <FeaturedCard/>*/}
-              {/*</View>*/}
             </View>
-
+            
+            {/* Latest Cars Section */}
             <View className={"flex flex-row items-center justify-between"}>
-              <Text className={"capitalize font-bold text-base"}>
-                latest cars
-              </Text>
+              <Text className={"capitalize font-bold text-base"}>latest cars</Text>
               <TouchableOpacity>
                 <Text className={"capitalize font-bold"}>see all</Text>
               </TouchableOpacity>
             </View>
             <Filters />
-            <View className={"flex flex-row gap-5 mt-5"}>
-              <Card />
-              <Card />
-            </View>
           </View>
         }
+        contentContainerClassName={"pb-32"}
+        columnWrapperClassName={"flex flex-row gap-5 px-5"}
+        showsVerticalScrollIndicator={false}
       />
+      {/* Add Car Button */}
+      <TouchableOpacity 
+        onPress={() => router.push('/cars/new')}
+        className="absolute bottom-8 right-8 bg-blue-500 rounded-full p-4 shadow-lg"
+      >
+        <View className="bg-white rounded-full p-2 mb-14">
+          <Image source={icons.bed} className="size-6" tintColor="black" />
+        </View>
+      </TouchableOpacity>
     </SafeAreaView>
   );
 }