From 0057e5228ddb6c27bc2077980831cc6656e39b17 Mon Sep 17 00:00:00 2001
From: Jakub Satora <kubasatora@wp.pl>
Date: Fri, 18 Oct 2024 19:32:07 +0200
Subject: [PATCH] user map for driver

---
 app/(root)/(tabs)/home.tsx | 12 ++++++------
 app/(root)/_layout.tsx     |  4 ++++
 app/(root)/find-ride.tsx   |  9 +++++----
 components/RideLayout.tsx  | 30 ++++++++++++++++++++++++++++++
 4 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 components/RideLayout.tsx

diff --git a/app/(root)/(tabs)/home.tsx b/app/(root)/(tabs)/home.tsx
index a3174b0..fb653c9 100644
--- a/app/(root)/(tabs)/home.tsx
+++ b/app/(root)/(tabs)/home.tsx
@@ -169,15 +169,15 @@ export default function Page() {
         )}
         ListHeaderComponent={() => (
           <>
-            <View className='flex flex-row items-center justify-between my-5'>
-              <Text className='text-2xl capitalize font-JakartaExtraBold'>
-                Welcome {user?.firstName || user?.emailAddresses[0].emailAddress.split("@")[0]}{" "}
+            <View className="flex flex-row items-center justify-between my-5">
+              <Text className="text-2xl font-JakartaExtraBold">
+                Welcome {user?.firstName}👋
               </Text>
               <TouchableOpacity
                 onPress={handleSignOut}
-                className='jsutify-center items-center
-               w-10 h-10 rounded-full bg-white'>
-                <Image source={icons.out} className='w-4 h-4' />
+                className="justify-center items-center w-10 h-10 rounded-full bg-white"
+              >
+                <Image source={icons.out} className="w-4 h-4" />
               </TouchableOpacity>
             </View>
             <GoogleTextInput
diff --git a/app/(root)/_layout.tsx b/app/(root)/_layout.tsx
index d191dc1..7dbd5fb 100644
--- a/app/(root)/_layout.tsx
+++ b/app/(root)/_layout.tsx
@@ -7,6 +7,10 @@ const Layout=()=> {
     return (
         <Stack>
             <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+            <Stack.Screen name="find-ride" options={{ headerShown: false }} />
+            <Stack.Screen name="confirm-ride" options={{ headerShown: false }} />
+            <Stack.Screen name="book-ride" options={{ headerShown: false }} />
+
         </Stack>
     );
 }
diff --git a/app/(root)/find-ride.tsx b/app/(root)/find-ride.tsx
index 497a716..b975cfe 100644
--- a/app/(root)/find-ride.tsx
+++ b/app/(root)/find-ride.tsx
@@ -1,13 +1,14 @@
+import RideLayout from "@/components/RideLayout"
 import { useLocationStore } from "@/store"
 import { Text, View } from "react-native"
 
 const FindRide = () => {
     const { userAddress, destinationAddress, setDestinationLocation, setUserLocation } = useLocationStore()
     return (
-        < View >
-            <Text className="text-2xl">You are here:{userAddress}</Text>
-            <Text className="text-2xl">You are going to:{destinationAddress}</Text>
-        </View >
+        < RideLayout >
+            <Text className="text-2xl">Find Ride</Text>
+
+        </RideLayout >
     )
 
 }
diff --git a/components/RideLayout.tsx b/components/RideLayout.tsx
new file mode 100644
index 0000000..441c016
--- /dev/null
+++ b/components/RideLayout.tsx
@@ -0,0 +1,30 @@
+import { icons } from "@/constants"
+import { router } from "expo-router"
+import { Image, Text, TouchableOpacity, View } from "react-native"
+import { GestureHandlerRootView } from "react-native-gesture-handler"
+import Map from "@/components/map";
+
+const RideLayout = ({ title, children }: { title: string, children: React.ReactNode }) => {
+    return (
+        <GestureHandlerRootView>
+            <View className="flex-1 bg-white">
+                <View className="flex flex-col h-screen bg-blue-500">
+                    <View className="flex flex-row absolute z-10 top-16 items-center justify-start px-5">
+                        <TouchableOpacity onPress={() => router.back()}>
+                            <View className="w-10 h-10 bg-white rounded-full items-center justify-center">
+                                <Image source={icons.backArrow} resizeMode="contain" className="w-6 h-6" />
+                            </View>
+                        </TouchableOpacity>
+                        <Text className="text-xl font-JakartaSemiBold">
+                            {title||"Go Back"}
+                        </Text>
+                       
+                    </View>
+                     <Map/>
+                </View>
+            </View>
+        </GestureHandlerRootView>
+    )
+
+}
+export default RideLayout
\ No newline at end of file