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 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | 1x 1x 9x 9x 1x 1x 1x 3x 3x 9x 9x 1x 1x 3x 1x 3x 9x 1x | import React from "react";
import { StyleSheet, Text, Pressable } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { TransportMode } from "../../type";
const BURGUNDY = "#800020";
const OFF_WHITE = "#F5F5F5";
interface NavigationTransportCardProps {
mode: TransportMode;
duration: string; // e.g. "5 mins" or "N/A"
isSelected: boolean;
onSelect: () => void;
}
export default function NavigationTransportCard({
mode,
duration,
isSelected,
onSelect,
}: Readonly<NavigationTransportCardProps>) {
// Mapping mode to icon names
const getIcon = () => {
switch (mode) {
case "WALK":
return "walk";
case "BIKE":
return "bicycle";
case "BUS":
return "bus";
case "CAR":
return "car-outline";
case "SHUTTLE":
return "bus-outline"; // Distinct icon for shuttle
}
};
const getLabel = () => {
switch (mode) {
case "WALK":
return "Walk";
case "BIKE":
return "Bike";
case "CAR":
return "Car";
case "BUS":
return "Bus";
case "SHUTTLE":
return "Shuttle";
}
};
return (
<Pressable
onPress={onSelect}
style={[
styles.card,
isSelected ? styles.cardSelected : styles.cardUnselected,
]}
>
<Ionicons
name={getIcon()}
size={24}
color={isSelected ? "#FFF" : "#333"}
/>
<Text style={[styles.label, isSelected && styles.textSelected]}>
{getLabel()}
</Text>
<Text style={[styles.duration, isSelected && styles.textSelected]}>
{duration}
</Text>
</Pressable>
);
}
const styles = StyleSheet.create({
card: {
alignSelf: "flex-start",
flex: 1,
minWidth: 70,
height: 70,
borderRadius: 12,
justifyContent: "center",
alignItems: "center",
marginHorizontal: 2,
paddingHorizontal: 2,
elevation: 2,
},
textContainer: {
alignItems: "center",
marginTop: 2,
width: "95%",
},
cardUnselected: {
backgroundColor: "#FFF",
borderWidth: 1,
borderColor: "#E0E0E0",
},
cardSelected: {
backgroundColor: BURGUNDY,
borderColor: BURGUNDY,
},
label: {
fontSize: 12,
fontWeight: "700",
color: "#1A1A1A",
textAlign: "center",
},
duration: {
fontSize: 10,
color: "#444444",
marginTop: 1,
textAlign: "center",
width: "100%",
fontWeight: "600",
},
textSelected: {
color: "#FFFFFF",
},
});
|