Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 4x 4x 1x | import { StyleSheet, Text, View } from "react-native";
import NavigationGoButton from "./NavigationGoButton";
import React from "react";
import { calculateETA } from "../../utils/navigationUtils";
interface NavigationPathRowProps {
handleGo: () => void;
duration: string;
}
export default function NavigationPathRow({
handleGo,
duration,
}: Readonly<NavigationPathRowProps>) {
const isUnavailable = !duration || duration === "N/A";
return (
<View style={styles.actionRow}>
<View style={styles.statsContainer}>
<Text style={styles.arrivingLabel}>Arriving in</Text>
<Text
style={styles.arrivingTime}
numberOfLines={1}
adjustsFontSizeToFit
>
{duration}
</Text>
</View>
<View style={styles.statsContainer}>
<Text style={styles.etaLabel}>ETA</Text>
<Text style={styles.etaTime}>{calculateETA(duration)}</Text>
</View>
<NavigationGoButton onPress={handleGo} disabled={isUnavailable} />
</View>
);
}
const styles = StyleSheet.create({
actionRow: {
flexDirection: "row",
width: "95%",
height: "57%",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 10,
borderRadius: 20,
backgroundColor: "#FFFFFF",
shadowColor: "#000",
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.1,
shadowRadius: 30,
elevation: 3,
borderColor: "#D9D9D9",
borderWidth: 1,
},
statsContainer: {
alignItems: "center",
justifyContent: "center",
},
arrivingLabel: {
fontSize: 12,
color: "#666",
marginBottom: 2,
},
arrivingTime: {
fontSize: 20,
fontWeight: "bold",
color: "#000",
},
etaLabel: {
fontSize: 12,
color: "#666",
marginBottom: 2,
},
etaTime: {
fontSize: 20,
fontWeight: "bold",
color: "#000",
},
});
|