ファイル移動

components/Apps/FixedPositionBox/FixedStationBox.tsx

@@ -0,0 +1,98 @@
+import lineColorList from "@/assets/originData/lineColorList";
+import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
+import { useStationList, StationProps } from "@/stateBox/useStationList";
+import { useEffect, useState } from "react";
+import { Text, TouchableOpacity, View } from "react-native";
+
+export const FixedStation = ({ stationID }) => {
+  const { fixedPosition, setFixedPosition } = useCurrentTrain();
+  const { getStationDataFromId } = useStationList();
+  const [station, setStation] = useState<StationProps[]>([]);
+  useEffect(() => {
+    const data = getStationDataFromId(stationID);
+    setStation(data);
+  }, [stationID]);
+  console.log(station);
+  const lineColor =
+    station.length > 0
+      ? lineColorList[station[0]?.StationNumber.slice(0, 1)]
+      : "white";
+  return (
+    <TouchableOpacity
+      style={{ flex: 1, flexDirection: "column" }}
+      onPress={() => {
+        setFixedPosition({ type: null, value: null });
+      }}
+    >
+      <View style={{ flex: 1, flexDirection: "row" }}>
+        <View
+          style={{
+            paddingHorizontal: 5,
+            backgroundColor: lineColor,
+            flexDirection: "row",
+          }}
+        >
+          {station.map((s) => {
+            if (s.StationNumber === null) return null;
+            return (
+              <View
+                key={s.StationNumber}
+                style={{
+                  flexDirection: "column",
+                  alignItems: "center",
+                  borderColor: lineColor,
+                  backgroundColor: "white",
+                  borderWidth: 1,
+                  borderRadius: 30,
+                  width: 25,
+                  height: 25,
+                }}
+              >
+                <Text style={{ fontSize: 10, margin: 0, padding: 0 }}>
+                  {s.StationNumber?.slice(0, 1)}
+                </Text>
+                <Text style={{ fontSize: 10, margin: 0, padding: 0 }}>
+                  {s.StationNumber?.slice(1)}
+                </Text>
+              </View>
+            );
+          })}
+        </View>
+        <View
+          style={{
+            backgroundColor: lineColor,
+          }}
+        >
+          <Text style={{ fontSize: 20 }}>{station[0]?.Station_JP}</Text>
+        </View>
+        <View
+          style={{
+            backgroundColor: lineColor,
+            width: 10,
+            borderLeftColor: lineColor,
+            borderBottomColor: "white",
+            borderBottomWidth: 25,
+            borderLeftWidth: 10,
+            borderRightWidth: 0,
+            borderTopWidth: 0,
+          }}
+        ></View>
+        <View style={{ backgroundColor: "white", flex: 1 }}>
+          <Text style={{ fontSize: 20 }}>駅情報固定中</Text>
+        </View>
+      </View>
+
+      <View
+        style={{
+          flex: 1,
+          flexDirection: "row",
+          backgroundColor: lineColor,
+        }}
+      >
+        <View style={{ backgroundColor: "white", flex: 1 }}>
+          <Text style={{ fontSize: 20 }}>次：15:00 快速マリン　岡山</Text>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};