image picker, form

app/(root)/cars/[id].tsx

@@ -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;

app/(root)/cars/new.tsx

@@ -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>
+    );
+}