diff --git a/app/(root)/(tabs)/index.tsx b/app/(root)/(tabs)/index.tsx
index 5ba0e7f..40cb173 100644
--- a/app/(root)/(tabs)/index.tsx
+++ b/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 (
-
-
-
-
-
- good morning
- {user?.name}
-
-
-
-
+ (
+
+ )}
+ keyExtractor={(item) => item.toString()}
+ numColumns={2}
+ contentContainerClassName={'pb-32'}
+ columnWrapperClassName={'flex flex-row gap-5 px-5'}
+ showsVerticalScrollIndicator={false}
+ ListHeaderComponent={
-
-
-
- featured
-
- see all
-
-
+
+
+
+
+
+ good morning
+ {user?.name}
+
+
+
+
-
-
-
-
+
+
+
+ featured
+
+ see all
+
+
+ (
+
+ )}
+ keyExtractor={(item) => item.toString()}
+ horizontal={true}
+ bounces={false}
+ showsHorizontalScrollIndicator={false}
+ contentContainerClassName={'flex gap-3 mt-5'}
+ />
+ {/**/}
+ {/* */}
+ {/* */}
+ {/**/}
+
+
+
+ latest cars
+
+ see all
+
+
+
+
+
+
+
+
+
+ }
+ />
);
}
diff --git a/components/Cards.tsx b/components/Cards.tsx
index db78ed1..11c3053 100644
--- a/components/Cards.tsx
+++ b/components/Cards.tsx
@@ -41,6 +41,10 @@ export const Card = ({onPress} :Props) => {
5.0
+
+ xyz
+ Skopje
+
)
}
\ No newline at end of file
diff --git a/components/Filters.tsx b/components/Filters.tsx
new file mode 100644
index 0000000..ddc87ad
--- /dev/null
+++ b/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 (
+
+ {categories.map((item, index) => {
+ return (
+ 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'}`}>
+ {item.title}
+ {/*mozam da gi napravam ikonki ili slikicki*/}
+
+ )
+ })}
+
+ )
+}
+export default Filters
diff --git a/constants/data.ts b/constants/data.ts
index 442aaf4..6c587c8 100644
--- a/constants/data.ts
+++ b/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 = [