84 lines
2.9 KiB
TypeScript
84 lines
2.9 KiB
TypeScript
import {View, Text, TouchableOpacity, Image} from 'react-native'
|
|
import React from 'react'
|
|
import images from "@/constants/images";
|
|
import icons from "@/constants/icons";
|
|
import { router } from "expo-router";
|
|
import { cars, featuredCars } from "@/constants/data";
|
|
import { useLocalSearchParams } from "expo-router";
|
|
|
|
|
|
interface Props {
|
|
onPress?: () => void;
|
|
id?: string;
|
|
data: {
|
|
id?: string;
|
|
$id?: string;
|
|
title: string;
|
|
location: string;
|
|
price: string | number;
|
|
image?: string;
|
|
images?: string[];
|
|
make?: string;
|
|
model?: string;
|
|
year: string | number;
|
|
fuelType: string;
|
|
transmission: string;
|
|
mileage?: string;
|
|
description: string;
|
|
category?: string;
|
|
postedBy?: string;
|
|
createdAt?: string;
|
|
};
|
|
}
|
|
|
|
export const FeaturedCard = ({data} :Props) => {
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={() => router.push(`/cars/${data.$id || data.id}`)}
|
|
className={'flex flex-col items-start w-60 h-60 relative'}
|
|
>
|
|
<Image
|
|
source={{ uri: data.images?.[0] || data.image }}
|
|
className={'w-60 h-40 rounded-2xl'}
|
|
resizeMode={"cover"}
|
|
/>
|
|
<Image source={images.cardGradient} className={'size-full rounded-2xl absolute bottom-0'}/>
|
|
|
|
<View className={'flex flex-col items-start absolute bottom-1 inset-x-5'}>
|
|
<Text className={'text-white text-base font-bold'} numberOfLines={1}>{data.title}</Text>
|
|
<Text className={'text-white'}>{data.location}</Text>
|
|
|
|
<View className={'flex flex-row items-center justify-between w-full'}>
|
|
<Text className={'text-base text-white'}>€{data.price}</Text>
|
|
<Image source={icons.heart} className={'size-5'}/>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
|
|
export const Card = ({data} :Props) => {
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={() => router.push(`/cars/${data.$id || data.id}`)}
|
|
className={'flex-1 w-full mt-4 px-3 py-4 rounded-xl bg-white shadow-lg shadow-black-100/70 relative'}
|
|
>
|
|
<Image
|
|
source={{ uri: data.images?.[0] || data.image }}
|
|
className={'w-full h-40 rounded-lg'}
|
|
resizeMode="cover"
|
|
/>
|
|
<View className={'flex flex-col mt-2'}>
|
|
<Text className={'text-base text-gray-600'}>{data?.title}</Text>
|
|
<Text className={'text-sm'}>{data?.location}</Text>
|
|
<Text className={'text-base text-blue-500'}>€{data?.price}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
const CarDetails = () => {
|
|
const { id } = useLocalSearchParams();
|
|
const carData = [...cars, ...featuredCars].find(car => car.id === id);
|
|
} |