find ride and book ride page ui created

2024-09-04 06:42:36 +00:00
parent 78ba198a1f
commit 0b2a3ee944
7 changed files with 252 additions and 10 deletions
@@ -0,0 +1,69 @@
+import { Image, Text, TouchableOpacity, View } from "react-native";
+
+import { icons } from "@/constants";
+import { formatTime } from "@/lib/utils";
+import { DriverCardProps } from "@/types/type";
+
+export const DriverCard = ({
+  item,
+  selected,
+  setSelected,
+}: DriverCardProps) => {
+  return (
+    <TouchableOpacity
+      onPress={setSelected}
+      className={`${
+        selected === item.id ? "bg-general-600" : "bg-white"
+      } flex flex-row items-center justify-between py-5 px-3 rounded-xl`}
+    >
+      <Image
+        source={{ uri: item.profile_image_url }}
+        alt="Driver Avatar"
+        className="w-14 h-14 rounded-full"
+      />
+
+      <View className="flex-1 flex flex-col items-start justify-center mx-3">
+        <View className="flex flex-row items-center justify-start mb-1">
+          <Text className="text-lg font-JakartaRegular">{item.title}</Text>
+
+          <View className="flex flex-row items-center space-x-1 ml-2">
+            <Image source={icons.star} alt="Star" className="w-3.5 h-3.5" />
+            <Text className="text-sm font-JakartaRegular">4</Text>
+          </View>
+        </View>
+
+        <View className="flex flex-row items-center justify-start">
+          <View className="flex flex-row items-center">
+            <Image source={icons.dollar} alt="Dollar" className="w-4 h-4" />
+            <Text className="text-sm font-JakartaRegular ml-1">
+              ${item.price}
+            </Text>
+          </View>
+
+          <Text className="text-sm font-JakartaRegular text-general-800 mx-1">
+            |
+          </Text>
+
+          <Text className="text-sm font-JakartaRegular text-general-800">
+            {formatTime(item.time!)}
+          </Text>
+
+          <Text className="text-sm font-JakartaRegular text-general-800 mx-1">
+            |
+          </Text>
+
+          <Text className="text-sm font-JakartaRegular text-general-800">
+            {item.car_seats} seats
+          </Text>
+        </View>
+      </View>
+
+      <Image
+        source={{ uri: item.car_image_url }}
+        alt="Car"
+        className="h-14 w-14"
+        resizeMode="contain"
+      />
+    </TouchableOpacity>
+  );
+};