116 lines
4.6 KiB
TypeScript
116 lines
4.6 KiB
TypeScript
import { Image, Text, View } from "react-native";
|
|
|
|
import { icons } from "@/constants";
|
|
import { tr } from "@/lib/i18n";
|
|
import { formatDate, formatTime } from "@/lib/utils";
|
|
import type { Ride } from "@/types/type";
|
|
|
|
export const RideCard = ({ ride }: { ride: Ride }) => {
|
|
const {
|
|
destination_latitude,
|
|
destination_longitude,
|
|
origin_address,
|
|
destination_address,
|
|
created_at,
|
|
ride_time,
|
|
driver,
|
|
payment_status,
|
|
} = ride;
|
|
|
|
return (
|
|
<View className="flex flex-row items-center justify-center bg-white dark:bg-neutral-900 rounded-lg shadow-sm shadow-neutral-300 dark:shadow-neutral-950/40 mb-3">
|
|
<View className="flex flex-col items-center justify-center p-3">
|
|
<View className="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}`,
|
|
}}
|
|
alt={tr("components.rideCard.mapAlt")}
|
|
className="w-[80px] h-[90px] rounded-lg"
|
|
/>
|
|
|
|
<View className="flex flex-col mx-5 gap-y-5 flex-1">
|
|
<View className="flex flex-row items-center gap-x-2">
|
|
<Image source={icons.to} alt={tr("components.rideCard.originAlt")} className="w-5 h-5" />
|
|
|
|
<Text className="font-JakartaMedium text-black dark:text-white" numberOfLines={1}>
|
|
{origin_address}
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="flex flex-row items-center gap-x-2">
|
|
<Image
|
|
source={icons.point}
|
|
alt={tr("components.rideCard.destinationAlt")}
|
|
className="w-5 h-5"
|
|
/>
|
|
|
|
<Text className="font-JakartaMedium text-black dark:text-white" numberOfLines={1}>
|
|
{destination_address}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
<View className="flex flex-col w-full mt-5 bg-general-500 dark:bg-neutral-800 rounded-lg p-3 items-start justify-center">
|
|
<View className="flex flex-row items-center w-full justify-between mb-5">
|
|
<Text className="font-JakartaMedium text-gray-500 dark:text-neutral-400 text-xs">
|
|
{tr("components.rideCard.dateTime")}
|
|
</Text>
|
|
|
|
<Text className="font-JakartaMedium text-gray-500 dark:text-neutral-400 text-xs">
|
|
{formatDate(created_at)}, {formatTime(ride_time)}
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="flex flex-row items-center w-full justify-between mb-5">
|
|
<Text className="font-JakartaMedium text-gray-500 dark:text-neutral-400 text-xs">
|
|
{tr("components.rideCard.driver")}
|
|
</Text>
|
|
|
|
<Text className="font-JakartaMedium text-gray-500 dark:text-neutral-400 text-xs">
|
|
{driver.first_name} {driver.last_name}
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="flex flex-row items-center w-full justify-between mb-5">
|
|
<Text className="font-JakartaMedium text-gray-500 dark:text-neutral-400 text-xs">
|
|
{tr("components.rideCard.carSeats")}
|
|
</Text>
|
|
|
|
<Text className="font-JakartaMedium text-gray-500 dark:text-neutral-400 text-xs">
|
|
{driver.car_seats}
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="flex flex-row items-center w-full justify-between mb-5">
|
|
<Text className="font-JakartaMedium text-gray-500 dark:text-neutral-400 text-xs">
|
|
{tr("components.rideCard.fare")}
|
|
</Text>
|
|
|
|
<Text className="font-JakartaMedium text-gray-500 dark:text-neutral-400 text-xs">
|
|
${(ride.fare_price / 100).toFixed(2)}
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="flex flex-row items-center w-full justify-between mb-5">
|
|
<Text className="font-JakartaMedium text-gray-500 dark:text-neutral-400 text-xs">
|
|
{tr("components.rideCard.paymentStatus")}
|
|
</Text>
|
|
|
|
<Text
|
|
className={`font-JakartaMedium capitalize text-xs ${payment_status === "paid" ? "text-emerald-500 dark:text-emerald-400" : "text-gray-500 dark:text-neutral-400"}`}
|
|
>
|
|
{payment_status === "cash"
|
|
? tr("components.rideCard.paymentCash")
|
|
: payment_status === "paid"
|
|
? tr("components.rideCard.paymentPaid")
|
|
: tr("components.rideCard.paymentOther", { status: payment_status })}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|