filters

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

@@ -1,17 +1,29 @@
 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]}
+                    renderItem={({item}) => (
+              <Card/>
+              )}
+                    keyExtractor={(item) => item.toString()}
+                    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'}/>
@@ -31,11 +43,37 @@ export default function Index() {
                                         <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: "Condos", category: "Condos" },
-  { title: "Duplexes", category: "Duplexes" },
-  { title: "Studios", category: "Studios" },
-  { title: "Villas", category: "Villa" },
-  { title: "Apartments", category: "Apartments" },
-  { title: "Townhomes", category: "Townhomes" },
-  { title: "Others", category: "Others" },
+  { title: "Sedan", category: "Sedan" },
+  { title: "Cabrio", category: "Cabrio" },
+  { title: "Van", category: "Van" },
+  { title: "Motorcicle", category: "Motorcircle" },
+  { title: "Truck", category: "Truck" },
 ];
 
 export const settings = [