45 lines
3.2 KiB
TypeScript
45 lines
3.2 KiB
TypeScript
import { icons } from "@/constants";
|
|
import { Image, Text, View } from "react-native";
|
|
import tw from "twrnc";
|
|
import { formatDate, formatTime } from "@/lib/utils";
|
|
const RideCard = ({ ride: { destination_longitude, destination_latitude, origin_address, destination_address, created_at, ride_time, driver,payment_status }, }: { ride: Ride }) => (
|
|
<View style={tw`flex flex-row items-center justify-center bg-white rounded-lg shadow-sm shadow-neutral-300 mb-3`}>
|
|
<View style={tw`flex flex-col items-center justify-center p-3`}>
|
|
<View style={tw`flex flex-row items-center justify-between`}>
|
|
<Image
|
|
source={{ uri: `https://maps.geoapify.com/v1/staticmap?style=osm-bright&width=600&height=400¢er=lonlat:${destination_longitude},${destination_latitude}&zoom=14&apiKey=${process.env.EXPO_PUBLIC_GEOAPIFY_API_KEY}`, }}
|
|
style={tw`w-[80px] h-[90px] rounded-lg`} />
|
|
<View style={tw`flex flex-col mx-5 gap-y-5 flex-1`}>
|
|
<View style={tw`flex flex-row items-center gap-x-2`}>
|
|
<Image source={icons.to} style={tw`w-5 h-5`} />
|
|
<Text style={tw`text-md font-JakartaMedium`} numberOfLines={1}>{origin_address}</Text>
|
|
</View>
|
|
<View style={tw`flex flex-row items-center gap-x-2`}>
|
|
<Image source={icons.point} style={tw`w-5 h-5`} />
|
|
<Text style={tw`text-md font-JakartaMedium`} numberOfLines={1}>{destination_address}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={tw`flex flex-col w-full mt-5 bg-general-500 rounded-lg p-3 items-start justify-center`} >
|
|
<View style={tw`flex flex-row items-center w-full justify-between mb-5`} >
|
|
<Text style={tw`text-md font-JakartaMedium text-gray-500 `}> Date & Time</Text>
|
|
<Text style={tw`text-md font-JakartaMedium text-gray-500 `}>{formatDate(created_at)}, {formatTime(ride_time)}</Text>
|
|
</View>
|
|
<View style={tw`flex flex-row items-center w-full justify-between mb-5`} >
|
|
<Text style={tw`text-md font-JakartaMedium text-gray-500 `}> Driver</Text>
|
|
<Text style={tw`text-md font-JakartaMedium text-gray-500 `}>{driver.first_name}, {driver.last_name}</Text>
|
|
</View>
|
|
<View style={tw`flex flex-row items-center w-full justify-between mb-5`} >
|
|
<Text style={tw`text-md font-JakartaMedium text-gray-500 `}> Car Seats</Text>
|
|
<Text style={tw`text-md font-JakartaMedium text-gray-500 `}>{driver.car_seats}</Text>
|
|
</View>
|
|
<View style={tw`flex flex-row items-center w-full justify-between mb-5`} >
|
|
<Text style={tw`text-md font-JakartaMedium text-gray-500 `}>payment Status</Text>
|
|
<Text style={tw`text-md font-JakartaMedium text-gray-500 ${payment_status === 'paid' ? "text-green-500" : "text-red-500"}`}>{payment_status.charAt(0).toUpperCase() + payment_status.slice(1)}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
|
|
export default RideCard; |