SpecialTrainInfoBoxを作成

components/Menu/FixedContentBottom.js

@@ -6,10 +6,11 @@ import {
   MaterialCommunityIcons,
 } from "@expo/vector-icons";
 import { ListItem } from "@rneui/themed";
-import TouchableScale from 'react-native-touchable-scale';
+import TouchableScale from "react-native-touchable-scale";
 import Icon from "react-native-vector-icons/Entypo";
 import { TextBox } from "../atom/TextBox";
 import { TicketBox } from "../atom/TicketBox";
+import { SpecialTrainInfoBox } from "./SpecialTrainInfoBox";
 
 export const FixedContentBottom = (props) => {
   return (
@@ -50,11 +51,14 @@ export const FixedContentBottom = (props) => {
           旅行ツアー
         </TicketBox>
       </View>
+      <SpecialTrainInfoBox navigate={props.navigate} />
       <TextBox
         backgroundColor="red"
         flex={1}
         onPressButton={() =>
-          Linking.openURL("https://xprocess.haruk.in/JR-shikoku-Apps-Common/2025-update-status")
+          Linking.openURL(
+            "https://xprocess.haruk.in/JR-shikoku-Apps-Common/2025-update-status"
+          )
         }
       >
         <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
@@ -264,12 +268,15 @@ export const FixedContentBottom = (props) => {
               name: "しこくたぬきのぽんちゃん　【四国家サポーターズクラブ】",
             },
           ].map((d) => (
-            <ListItem bottomDivider onPress={() => Linking.openURL(d.url)}
-             key={d.url}friction={90} //
-             tension={100} // These props are passed to the parent component (here TouchableScale)
-             activeScale={0.95} //
-             Component={TouchableScale} 
-             >
+            <ListItem
+              bottomDivider
+              onPress={() => Linking.openURL(d.url)}
+              key={d.url}
+              friction={90} //
+              tension={100} // These props are passed to the parent component (here TouchableScale)
+              activeScale={0.95} //
+              Component={TouchableScale}
+            >
               <ListItem.Content>
                 <ListItem.Title>{d.name}</ListItem.Title>
               </ListItem.Content>

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>
+  );
+};