80 lines
4.0 KiB
TypeScript
80 lines
4.0 KiB
TypeScript
import { Link } from "expo-router";
|
|
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'}>
|
|
<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'}/>
|
|
<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>
|
|
|
|
<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>
|
|
);
|
|
}
|