59 lines
1.8 KiB
JavaScript
59 lines
1.8 KiB
JavaScript
import { View, Text } from "react-native";
|
|
import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";
|
|
import LottieView from "lottie-react-native";
|
|
import { Ionicons, AntDesign } from "@expo/vector-icons";
|
|
import { useStationList } from "@/stateBox/useStationList";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
|
|
export const Header = ({ station }) => {
|
|
const {
|
|
currentTrainLoading,
|
|
setCurrentTrainLoading,
|
|
getCurrentTrain,
|
|
inject,
|
|
} = useCurrentTrain();
|
|
const { getInjectJavascriptAddress } = useStationList();
|
|
const { navigate } = useNavigation();
|
|
return (
|
|
<View
|
|
style={{
|
|
alignContent: "center",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
marginVertical: 10,
|
|
flexDirection: "row",
|
|
}}
|
|
>
|
|
<View style={{ flex: 1, flexDirection: "column", alignItems: "center" }}>
|
|
</View>
|
|
<View style={{}}>
|
|
<Text style={{ fontSize: 25, color: "white", fontWeight: "bold" }}>
|
|
次の列車
|
|
</Text>
|
|
<Text style={{ fontSize: 15, color: "white" }}>Next Train</Text>
|
|
</View>
|
|
<View style={{ flex: 1, flexDirection: "row-reverse" }}>
|
|
{currentTrainLoading == "loading" ? (
|
|
<LottieView
|
|
autoPlay
|
|
loop
|
|
style={{ width: 40, height: 40, marginRight: 30 }}
|
|
source={require("../../../assets/51690-loading-diamonds.json")}
|
|
/>
|
|
) : currentTrainLoading == "error" ? (
|
|
<Ionicons
|
|
name="reload"
|
|
color="white"
|
|
size={30}
|
|
style={{ marginRight: 30 }}
|
|
onPress={() => {
|
|
setCurrentTrainLoading("loading");
|
|
getCurrentTrain();
|
|
}}
|
|
/>
|
|
) : null}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|