SpecialTrainInfoBoxを作成

components/Menu/SpecialTrainInfoBox.tsx

@@ -0,0 +1,69 @@
+import { FC, useEffect, useState } from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import { getPDFViewURL } from "@/lib/getPdfViewURL";
+
+type props = {
+  navigate: (screen: string, params?: object) => void;
+};
+export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
+  const [specialData, setSpecialData] = useState([]);
+  useEffect(() => {
+    fetch("https://n8n.haruk.in/webhook/sptrainfo")
+      .then((res) => res.json())
+      .then((data) => setSpecialData(data.data))
+      .catch((err) => console.log(err));
+  }, []);
+  return (
+    <View
+      style={{
+        backgroundColor: "#0099CC",
+        borderRadius: 10,
+        margin: 5,
+        borderWidth: 1,
+        borderColor: "black",
+      }}
+    >
+      <View style={{ flexDirection: "row", alignItems: "center" }}>
+        <Text
+          style={{
+            fontSize: 30,
+            fontWeight: "bold",
+            color: "white",
+            padding: 10,
+          }}
+        >
+          臨時列車情報
+        </Text>
+      </View>
+      <View
+        style={{
+          backgroundColor: "white",
+          borderBottomLeftRadius: 10,
+          borderBottomRightRadius: 10,
+        }}
+      >
+        {specialData.map((d) => (
+          <TouchableOpacity
+            onPress={() => {
+              navigate("howto", {
+                info: getPDFViewURL("https://www.jr-shikoku.co.jp" + d.address),
+                goTo: "menu",
+              });
+            }}
+            onLongPress={() => alert(d.description)}
+            key={d.address}
+            style={{
+              padding: 10,
+              borderBottomWidth: 1,
+              borderBottomColor: "#ccc",
+              flexDirection: "row",
+              alignItems: "center",
+            }}
+          >
+            <Text style={{ color: "black", fontSize: 20 }}>{d.text}</Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};