dimitar/reactnative_mobilemk
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

filters

Browse Source
This commit is contained in:
dimitar committed 2025-01-13 11:09:19 +01:00
1 parent c63b872c28
commit fe95ee5887
4 files changed
+106 -32
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/(root)/(tabs)/index.tsx
+62 -24
View File
@@ -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'}>
<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>
<Image source={icons.bell} className={'size-6'}/>
</View>
<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={
<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 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>
<Image source={icons.bell} className={'size-6'}/>
</View>
<FeaturedCard/>
<Card/>
</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>
<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>
);
}