filters

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

@@ -1,41 +1,79 @@
 import { Link } from "expo-router";
-import {Image, SafeAreaView, Text, TouchableOpacity, View} from "react-native";
+import {FlatList, Image, SafeAreaView, Text, TouchableOpacity, View} from "react-native";
 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";
 
 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'}>
+          <FlatList data={[1,2,3,4]}
-              <View className={'flex flex-row items-center justify-between mt-5'}>
+                    renderItem={({item}) => (
-                  <View className={'flex flex-row items-center'}>
+              <Card/>
-                      <Image source={{uri: user?.avatar}} className={'rounded-full size-12'}/>
+              )}
-                      <View className={'flex flex-col items-start ml-4 justify-center'}>
+                    keyExtractor={(item) => item.toString()}
-                          <Text className={'capitalize'}>good morning</Text>
+                    numColumns={2}
-                          <Text className={'capitalize font-bold'}>{user?.name}</Text>
+                    contentContainerClassName={'pb-32'}
-                      </View>
+                    columnWrapperClassName={'flex flex-row gap-5 px-5'}
-                  </View>
+                    showsVerticalScrollIndicator={false}
-                  <Image source={icons.bell} className={'size-6'}/>
+                    ListHeaderComponent={
-              </View>
 
-              <Search />
+                        <View className={'px-4'}>
-              <View className={'my-5'}>
+                            <View className={'flex flex-row items-center justify-between mt-5'}>
-                  <View className={'flex flex-row items-center justify-between'}>
+                                <View className={'flex flex-row items-center'}>
-                      <Text className={'capitalize font-bold text-base'}>featured</Text>
+                                    <Image source={{uri: user?.avatar}} className={'rounded-full size-12'}/>
-                      <TouchableOpacity>
+                                    <View className={'flex flex-col items-start ml-4 justify-center'}>
-                          <Text className={'capitalize text-base text-blue-500'}>see all</Text>
+                                        <Text className={'capitalize'}>good morning</Text>
-                      </TouchableOpacity>
+                                        <Text className={'capitalize font-bold'}>{user?.name}</Text>
-                  </View>
+                                    </View>
+                                </View>
+                                <Image source={icons.bell} className={'size-6'}/>
+                            </View>
 
-                  <FeaturedCard/>
+                            <Search />
-                  <Card/>
+                            <View className={'my-5'}>
-          </View>
+                                <View className={'flex flex-row items-center justify-between'}>
-          </View>
+                                    <Text className={'capitalize font-bold text-base'}>featured</Text>
+                                    <TouchableOpacity>
+                                        <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()}
+                                          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>
+
+                            <View className={'flex flex-row items-center justify-between'}>
+                                <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>
+
+                    }
+                    />
       </SafeAreaView>
   );
 }

components/Cards.tsx

@@ -41,6 +41,10 @@ export const Card = ({onPress} :Props) => {
                 <Text className={'text-sm ml-1'}>5.0</Text>
             </View>
             <Image  source={images.car2} className={'w-full h-40 rounded-lg'}/>
+            <View className={'flex flex-col mt-2'}>
+                <Text className={'text-base text-gray-600'}>xyz</Text>
+                <Text className={'text-sm'}>Skopje</Text>
+            </View>
         </TouchableOpacity>
     )
 }

components/Filters.tsx

@@ -0,0 +1,35 @@
+import {View, Text, ScrollView, TouchableOpacity} from 'react-native'
+import React, {useState} from 'react'
+import {router, useLocalSearchParams} from "expo-router";
+import {categories} from "@/constants/data";
+
+const Filters = () => {
+    const params  = useLocalSearchParams<{filter?: string}>();
+    const [selectedCategory, setSelectedCategory] = useState(params.filter || 'All');
+
+    const handleCategoryChange = (category: string) => {
+        // setSelectedCategory(category);
+        // router.setParams({ filter: category });
+        if(selectedCategory === category) {
+            setSelectedCategory('All');
+            router.setParams({ filter: "All" });
+            return;
+        }
+        setSelectedCategory(category);
+        router.setParams({ filter: category });
+        console.log(category)
+    }
+    return (
+        <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} className={'mt-3 mb-2'}>
+            {categories.map((item, index) => {
+                return (
+                    <TouchableOpacity onPress={() => handleCategoryChange(item.category)} className={`flex flex-col items-start mr-4 px-4 py-2 rounded-full ${selectedCategory === item.category ? 'bg-blue-300' : 'border border-blue-200'}`}>
+                        <Text>{item.title}</Text>
+                        {/*mozam da gi napravam ikonki ili slikicki*/}
+                    </TouchableOpacity>
+                )
+            })}
+        </ScrollView>
+    )
+}
+export default Filters

constants/data.ts

@@ -57,14 +57,11 @@ export const featuredCards = [
 
 export const categories = [
   { title: "All", category: "All" },
-  { title: "Houses", category: "House" },
+  { title: "Sedan", category: "Sedan" },
-  { title: "Condos", category: "Condos" },
+  { title: "Cabrio", category: "Cabrio" },
-  { title: "Duplexes", category: "Duplexes" },
+  { title: "Van", category: "Van" },
-  { title: "Studios", category: "Studios" },
+  { title: "Motorcicle", category: "Motorcircle" },
-  { title: "Villas", category: "Villa" },
+  { title: "Truck", category: "Truck" },
-  { title: "Apartments", category: "Apartments" },
-  { title: "Townhomes", category: "Townhomes" },
-  { title: "Others", category: "Others" },
 ];
 
 export const settings = [