119 lines
4.1 KiB
TypeScript
119 lines
4.1 KiB
TypeScript
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 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 (
|
|
<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 CarDetails;
|