ファイルの分離

components/TrainMenu/UsefulBox.tsx

@@ -0,0 +1,32 @@
+import React, { FC } from "react";
+import { Text, TouchableOpacity } from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+
+type Props = {
+  icon: keyof typeof MaterialCommunityIcons.glyphMap;
+  backgroundColor: string;
+  flex: number;
+  onPressButton: () => void;
+  children: string;
+};
+
+export const UsefulBox: FC<Props> = (props) => {
+  const { icon, backgroundColor, flex, onPressButton, children } = props;
+  return (
+    <TouchableOpacity
+      style={{
+        flex: flex,
+        backgroundColor: backgroundColor,
+        padding: 5,
+        alignItems: "center",
+        margin: 2,
+      }}
+      onPress={onPressButton}
+    >
+      <MaterialCommunityIcons name={icon} color="white" size={50} />
+      <Text style={{ color: "white", fontWeight: "bold", fontSize: 16 }}>
+        {children}
+      </Text>
+    </TouchableOpacity>
+  );
+};