暫定型移行

components/atom/FavoriteListItem.tsx

@@ -0,0 +1,81 @@
+import React, { FC } from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import lineColorList from "../../assets/originData/lineColorList";
+
+
+type Props = {
+  currentStation: {
+    Station_JP: string;
+    StationNumber: string;
+  }[];
+  onPress: () => void;
+  children: React.ReactNode;
+}
+export const FavoriteListItem:FC<Props> = ({ currentStation, children, onPress }) => {
+  const lineIDs = [];
+  const EachIDs = [];
+  currentStation.forEach((d) => {
+    if (!d.StationNumber) return;
+    const textArray = d.StationNumber.split("");
+    lineIDs.push(textArray.filter((s) => "A" < s && s < "Z").join(""));
+    EachIDs.push(textArray.filter((s) => "0" <= s && s <= "9").join(""));
+  });
+
+  return (
+    <TouchableOpacity
+      style={{ flexDirection: "row", backgroundColor: "white" }}
+      onPress={onPress}
+    >
+      <View
+        style={{
+          width: 35,
+          position: "relative",
+          marginHorizontal: 15,
+          flexDirection: "row",
+          height: "101%",
+        }}
+      >
+        {lineIDs.map((lineID, index) => (
+          <View
+            style={{
+              backgroundColor: lineColorList[lineID],
+              flex: 1,
+            }}
+            key={lineID}
+          >
+            <View style={{ flex: 1 }} />
+            <Text
+              style={{
+                color: "white",
+                textAlign: "center",
+                fontSize: 12,
+                fontWeight: "bold",
+              }}
+            >
+              {lineIDs[index]}
+              {"\n"}
+              {EachIDs[index]}
+            </Text>
+            <View style={{ flex: 1 }} />
+          </View>
+        ))}
+      </View>
+
+      <View
+        style={{
+          padding: 8,
+          flexDirection: "row",
+          borderBottomWidth: 1,
+          borderBottomColor: "#f0f0f0",
+          flex: 1,
+          alignContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Text style={{ fontSize: 20 }}>{currentStation[0].Station_JP}</Text>
+        <View style={{ flex: 1 }} />
+        {children}
+      </View>
+    </TouchableOpacity>
+  );
+};