単発の変更

components/Menu/TopMenuButton.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Linking, View } from "react-native";
+import { UsefulBox } from "@/components/TrainMenu/UsefulBox";
+import MaterialCommunityIcons from "@expo/vector-icons/build/MaterialCommunityIcons";
+export const TopMenuButton = () => {
+  const buttonList:{
+    backgroundColor: string;
+    icon: keyof typeof MaterialCommunityIcons.glyphMap;
+    onPress: () => void;
+    title: string;
+  }[] = [
+    {
+      backgroundColor: "#F89038",
+      icon: "train-car",
+      onPress: () =>
+        Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/sp/"),
+      title: "駅・鉄道情報",
+    },
+    {
+      backgroundColor: "#EA4752",
+      icon: "google-spreadsheet",
+      onPress: () =>
+        Linking.openURL(
+          "https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
+        ),
+      title: "運賃表",
+    },
+    {
+      backgroundColor: "#91C31F",
+      icon: "clipboard-list-outline",
+      onPress: () => Linking.openURL("https://www.jr-shikoku.co.jp/e5489/"),
+      title: "予約",
+    },
+  ];
+
+
+  return (
+    <View style={{ flexDirection: "row" }}>
+      {buttonList.map((d, index) => (
+        <UsefulBox
+          backgroundColor={d.backgroundColor}
+          icon={d.icon}
+          flex={1}
+          onPressButton={d.onPress}
+          key={index + d.icon}
+        >
+          {d.title}
+        </UsefulBox>
+      ))}
+    </View>
+  );
+};