image picker, form
This commit is contained in:
echo committed
1 parent
7f702c58aa
commit
f3007d6419
14 files changed
+757
-303
No files matched your search
+66
-44
@@ -7,87 +7,109 @@ import {
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import images from "@/constants/images";
|
||||
// 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";
|
||||
// import { cars, featuredCars } from "@/constants/data";
|
||||
import { router } from 'expo-router';
|
||||
import { useEffect, useState } from "react";
|
||||
import { getCars, getFeaturedCars } from "@/lib/database";
|
||||
|
||||
export default function Index() {
|
||||
// create func that determines the time od day [morning, evening, night]
|
||||
const { user, refetch } = useGlobalContext();
|
||||
const [cars, setCars] = useState<any[]>([]);
|
||||
const [featuredCars, setFeaturedCars] = useState<any[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const [allCars, featured] = await Promise.all([
|
||||
getCars(),
|
||||
getFeaturedCars()
|
||||
]);
|
||||
setCars(allCars);
|
||||
setFeaturedCars(featured);
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<SafeAreaView className={"bg-white h-full"}>
|
||||
<FlatList
|
||||
data={[5, 6, 7, 8]}
|
||||
renderItem={({ item }) => <Card />}
|
||||
keyExtractor={(item) => item.toString()}
|
||||
data={cars}
|
||||
renderItem={({ item }) => <Card data={item} />}
|
||||
keyExtractor={(item) => item.$id}
|
||||
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>
|
||||
{/* User Info */}
|
||||
<View className="px-5 pt-5 flex-row items-center justify-between">
|
||||
<View>
|
||||
<Text className="text-2xl font-bold">Welcome back,</Text>
|
||||
<Text className="text-lg text-gray-500">{user?.name}</Text>
|
||||
</View>
|
||||
<Image source={icons.bell} className={"size-6"} />
|
||||
<TouchableOpacity>
|
||||
<Image
|
||||
source={{ uri: user?.avatar }}
|
||||
className="w-12 h-12 rounded-full"
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<Search />
|
||||
{/* Search */}
|
||||
<View className="px-5 mt-5">
|
||||
<Search />
|
||||
</View>
|
||||
|
||||
{/* Featured Section */}
|
||||
<View className={"my-5"}>
|
||||
<View className={"flex flex-row items-center justify-between"}>
|
||||
<Text className={"capitalize font-bold text-base"}>
|
||||
featured
|
||||
</Text>
|
||||
<Text className={"capitalize font-bold text-base"}>featured</Text>
|
||||
<TouchableOpacity>
|
||||
<Text className={"capitalize text-base text-blue-500"}>
|
||||
see all
|
||||
</Text>
|
||||
<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()}
|
||||
data={featuredCars}
|
||||
renderItem={({ item }) => <FeaturedCard data={item} />}
|
||||
keyExtractor={(item) => item.$id}
|
||||
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>
|
||||
|
||||
|
||||
{/* Latest Cars Section */}
|
||||
<View className={"flex flex-row items-center justify-between"}>
|
||||
<Text className={"capitalize font-bold text-base"}>
|
||||
latest cars
|
||||
</Text>
|
||||
<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>
|
||||
}
|
||||
contentContainerClassName={"pb-32"}
|
||||
columnWrapperClassName={"flex flex-row gap-5 px-5"}
|
||||
showsVerticalScrollIndicator={false}
|
||||
/>
|
||||
{/* Add Car Button */}
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push('/cars/new')}
|
||||
className="absolute bottom-8 right-8 bg-blue-500 rounded-full p-4 shadow-lg"
|
||||
>
|
||||
<View className="bg-white rounded-full p-2 mb-14">
|
||||
<Image source={icons.bed} className="size-6" tintColor="black" />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
+112
-8
@@ -1,14 +1,118 @@
|
||||
import { View, Text } from "react-native";
|
||||
import React from "react";
|
||||
import { useLocalSearchParams } from "expo-router";
|
||||
import { View, Text, SafeAreaView, ScrollView, Image, TouchableOpacity } from "react-native";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useLocalSearchParams, router } from "expo-router";
|
||||
import icons from "@/constants/icons";
|
||||
import { getCar } from "@/lib/database";
|
||||
|
||||
const Car = () => {
|
||||
const CarDetails = () => {
|
||||
const { id } = useLocalSearchParams();
|
||||
const [carData, setCarData] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCar = async () => {
|
||||
try {
|
||||
const car = await getCar(id as string);
|
||||
setCarData(car);
|
||||
} catch (error) {
|
||||
console.error('Error fetching car:', error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchCar();
|
||||
}, [id]);
|
||||
|
||||
if (!carData) return null;
|
||||
|
||||
return (
|
||||
<View>
|
||||
<Text>Car {id}</Text>
|
||||
</View>
|
||||
<SafeAreaView className="bg-white flex-1">
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerClassName="pb-32"
|
||||
>
|
||||
{/* Header */}
|
||||
<View className="relative">
|
||||
<Image
|
||||
source={{ uri: carData.images?.[0] }}
|
||||
className="w-full h-72"
|
||||
resizeMode="cover"
|
||||
/>
|
||||
|
||||
{/* Back Button */}
|
||||
<TouchableOpacity
|
||||
onPress={() => router.back()}
|
||||
className="absolute top-5 left-5 bg-white/90 p-2 rounded-full"
|
||||
>
|
||||
<Image source={icons.backArrow} className="size-6" />
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Favorite Button */}
|
||||
<TouchableOpacity
|
||||
className="absolute top-5 right-5 bg-white/90 p-2 rounded-full"
|
||||
>
|
||||
<Image source={icons.heart} className="size-6" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Content */}
|
||||
<View className="px-5 mt-5">
|
||||
{/* Title and Rating */}
|
||||
<View className="flex-row justify-between items-center">
|
||||
<Text className="text-2xl font-bold">{carData.title}</Text>
|
||||
<View className="flex-row items-center bg-white px-3 py-1.5 rounded-full border border-gray-200">
|
||||
<Image source={icons.star} className="size-4" />
|
||||
<Text className="ml-1">{carData.rating}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Location */}
|
||||
<View className="flex-row items-center mt-2">
|
||||
<Image source={icons.location} className="size-5" />
|
||||
<Text className="ml-2 text-gray-500">{carData.location}</Text>
|
||||
</View>
|
||||
|
||||
{/* Price */}
|
||||
<Text className="text-2xl font-bold text-blue-500 mt-4">€{carData.price}</Text>
|
||||
|
||||
{/* Details */}
|
||||
<View className="mt-6">
|
||||
<Text className="text-lg font-bold mb-3">Car Details</Text>
|
||||
<View className="flex-row flex-wrap gap-4">
|
||||
<View className="bg-gray-100 px-4 py-2 rounded-lg">
|
||||
<Text>{carData.year}</Text>
|
||||
</View>
|
||||
<View className="bg-gray-100 px-4 py-2 rounded-lg">
|
||||
<Text>{carData.fuelType}</Text>
|
||||
</View>
|
||||
<View className="bg-gray-100 px-4 py-2 rounded-lg">
|
||||
<Text>{carData.transmission}</Text>
|
||||
</View>
|
||||
<View className="bg-gray-100 px-4 py-2 rounded-lg">
|
||||
<Text>{carData.mileage} km</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Description */}
|
||||
<View className="mt-6">
|
||||
<Text className="text-lg font-bold mb-3">Description</Text>
|
||||
<Text className="text-gray-600 leading-5">
|
||||
{carData.description}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
{/* Bottom Actions */}
|
||||
<View className="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-5 flex-row justify-between">
|
||||
<TouchableOpacity className="flex-1 mr-2 bg-white border border-blue-500 rounded-full py-3 items-center">
|
||||
<Text className="text-blue-500 font-semibold">Message</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity className="flex-1 ml-2 bg-blue-500 rounded-full py-3 items-center">
|
||||
<Text className="text-white font-semibold">Call</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
export default Car;
|
||||
export default CarDetails;
|
||||
@@ -0,0 +1,10 @@
|
||||
import { SafeAreaView } from 'react-native';
|
||||
import { CarForm } from '@/components/CarForm';
|
||||
|
||||
export default function NewCar() {
|
||||
return (
|
||||
<SafeAreaView className="flex-1 bg-white">
|
||||
<CarForm />
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user