73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
|
|
import { router } from "expo-router";
|
|
import { useRef, type PropsWithChildren } from "react";
|
|
import { Image, Text, TouchableOpacity, View } from "react-native";
|
|
import { GestureHandlerRootView } from "react-native-gesture-handler";
|
|
|
|
import { icons } from "@/constants";
|
|
import { tr } from "@/lib/i18n";
|
|
import { useTheme } from "@/lib/theme";
|
|
|
|
import { Map } from "./map";
|
|
|
|
type RideLayoutProps = {
|
|
title?: string;
|
|
snapPoints?: string[];
|
|
};
|
|
|
|
export const RideLayout = ({
|
|
title,
|
|
snapPoints,
|
|
children,
|
|
}: PropsWithChildren<RideLayoutProps>) => {
|
|
const bottomSheetRef = useRef<BottomSheet>(null);
|
|
const { isDark } = useTheme();
|
|
|
|
return (
|
|
<GestureHandlerRootView>
|
|
<View className="flex-1 bg-white dark:bg-neutral-950">
|
|
<View className="flex flex-col h-screen bg-blue-500 dark:bg-neutral-900">
|
|
<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 dark:bg-neutral-900 rounded-full items-center justify-center">
|
|
<Image
|
|
source={icons.backArrow}
|
|
alt={tr("components.rideLayout.backArrowAlt")}
|
|
resizeMode="contain"
|
|
className="w-6 h-6"
|
|
/>
|
|
</View>
|
|
</TouchableOpacity>
|
|
|
|
<Text className="text-xl font-JakartaSemiBold ml-5 text-black dark:text-white">
|
|
{title ?? tr("components.rideLayout.goBack")}
|
|
</Text>
|
|
</View>
|
|
|
|
<Map />
|
|
</View>
|
|
|
|
<BottomSheet
|
|
keyboardBehavior="extend"
|
|
ref={bottomSheetRef}
|
|
snapPoints={snapPoints ?? ["40%", "85%"]}
|
|
index={0}
|
|
backgroundStyle={{ backgroundColor: isDark ? "#0a0a0a" : "#ffffff" }}
|
|
handleIndicatorStyle={{
|
|
backgroundColor: isDark ? "#525252" : "#d4d4d4",
|
|
}}
|
|
>
|
|
<BottomSheetView
|
|
style={{
|
|
flex: 1,
|
|
padding: 20,
|
|
}}
|
|
>
|
|
{children}
|
|
</BottomSheetView>
|
|
</BottomSheet>
|
|
</View>
|
|
</GestureHandlerRootView>
|
|
);
|
|
};
|