50 lines
2.2 KiB
TypeScript
50 lines
2.2 KiB
TypeScript
import {View, Text, TouchableOpacity, Image} from 'react-native'
|
|
import React from 'react'
|
|
import images from "@/constants/images";
|
|
import icons from "@/constants/icons";
|
|
|
|
|
|
interface Props {
|
|
onPress?: () => void
|
|
}
|
|
|
|
export const FeaturedCard = ({onPress} :Props) => {
|
|
return (
|
|
<TouchableOpacity className={'flex flex-col items-start w-60 h-60 relative'}>
|
|
<Image source={images.car1} className={'w-60 h-40 rounded-2xl'} resizeMode={"contain"}/>
|
|
<Image source={images.cardGradient} className={'size-full rounded-2xl absolute bottom-0'}/>
|
|
|
|
<View className={'flex flex-row items-center bg-white/90 px-3 py-1.5 rounded-full absolute top-5 right-1'}>
|
|
<Image source={icons.star} className={'size-3'}/>
|
|
<Text className={'text-sm ml-1'}>5</Text>
|
|
</View>
|
|
<View className={'flex flex-col items-start absolute bottom-1 inset-x-5'}>
|
|
<Text className={'text-white text-base font-bold'} numberOfLines={1}>Honda - xyz</Text>
|
|
<Text className={'text-white'}>Skopje</Text>
|
|
|
|
<View className={'flex flex-row items-center justify-between w-full'}>
|
|
<Text className={'text-base text-white'}>
|
|
25.000
|
|
</Text>
|
|
<Image source={icons.heart} className={'size-5'}/>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
export const Card = ({onPress} :Props) => {
|
|
return (
|
|
<TouchableOpacity onPress={onPress} className={'flex-1 w-full mt-4 px-3 py-4 rounded-xl bg-white shadow-lg shadow-black-100/70 relative'}>
|
|
<View className={'flex flex-row items-center absolute px-2 top-5 right-5 bg-white/90 p-1 rounded-full z-50'}>
|
|
<Image source={icons.star} className={'size-2.5'}/>
|
|
<Text className={'text-sm ml-1'}>5.0</Text>
|
|
</View>
|
|
<Image source={images.car2} className={'w-full h-40 rounded-lg'}/>
|
|
<View className={'flex flex-col mt-2'}>
|
|
<Text className={'text-base text-gray-600'}>xyz</Text>
|
|
<Text className={'text-sm'}>Skopje</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
)
|
|
} |