From a40b5c1842cea9c15aa63b3e1a23ba56ef3f6eea Mon Sep 17 00:00:00 2001
From: harukin-expo-dev-env <harukin@haruk.in>
Date: Sun, 10 Mar 2024 15:05:28 +0000
Subject: [PATCH] =?UTF-8?q?=E8=A8=AD=E5=AE=9A=E3=83=9C=E3=82=BF=E3=83=B3?=
 =?UTF-8?q?=E3=82=92=E6=95=B4=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/settings.js | 155 +++++++++++++----------------------------
 1 file changed, 49 insertions(+), 106 deletions(-)

diff --git a/components/settings.js b/components/settings.js
index 6061d5d..17ea209 100644
--- a/components/settings.js
+++ b/components/settings.js
@@ -58,112 +58,36 @@ export default function Setting(props) {
           </Text>
         </View>
         <View style={{ flex: 1 }}>
-          <View style={{ flexDirection: "row", padding: 10 }}>
-            <Text
-              style={{
-                fontSize: 25,
-                alignItems: "center",
-                alignContent: "center",
-                textAlign: "center",
-                textAlignVertical: "center",
-              }}
-            >
-              列車アイコンを表示する
-            </Text>
-            <View style={{ flex: 1 }} />
-            <SimpleSwitch
-              bool={iconSetting}
-              setBool={setIconSetting}
-              color="red"
-            />
-          </View>
-          <View style={{ flexDirection: "row", padding: 10 }}>
-            <Text
-              style={{
-                fontSize: 25,
-                alignItems: "center",
-                alignContent: "center",
-                textAlign: "center",
-                textAlignVertical: "center",
-              }}
-            >
-              マップを表示する(beta)
-            </Text>
-            <View style={{ flex: 1 }} />
-            <SimpleSwitch bool={mapSwitch} setBool={setMapSwitch} color="red" />
-          </View>
-          <View style={{ flexDirection: "row", padding: 10 }}>
-            <Text
-              style={{
-                fontSize: 25,
-                alignItems: "center",
-                alignContent: "center",
-                textAlign: "center",
-                textAlignVertical: "center",
-              }}
-            >
-              駅メニューを表示
-            </Text>
-            <View style={{ flex: 1 }} />
-            <SimpleSwitch
-              bool={stationMenu}
-              setBool={setStationMenu}
-              color="red"
-            />
-          </View>
-          <View style={{ flexDirection: "row", padding: 10 }}>
-            <Text
-              style={{
-                fontSize: 25,
-                alignItems: "center",
-                alignContent: "center",
-                textAlign: "center",
-                textAlignVertical: "center",
-              }}
-            >
-              時刻表PDFをアプリ外で表示
-            </Text>
-            <View style={{ flex: 1 }} />
-            <SimpleSwitch
-              bool={usePDFView}
-              setBool={setUsePDFView}
-              color="red"
-            />
-          </View>
-          <View style={{ flexDirection: "row", padding: 10 }}>
-            <Text
-              style={{
-                fontSize: 25,
-                alignItems: "center",
-                alignContent: "center",
-                textAlign: "center",
-                textAlignVertical: "center",
-              }}
-            >
-              列車メニュー
-            </Text>
-            <View style={{ flex: 1 }} />
-            <SimpleSwitch bool={trainMenu} setBool={setTrainMenu} color="red" />
-          </View>
-          <View style={{ flexDirection: "row", padding: 10 }}>
-            <Text
-              style={{
-                fontSize: 25,
-                alignItems: "center",
-                alignContent: "center",
-                textAlign: "center",
-                textAlignVertical: "center",
-              }}
-            >
-              →列車現在位置表示(alpha)
-            </Text>
-            <View style={{ flex: 1 }} />
-            <SimpleSwitch
-              bool={trainPosition}
-              setBool={setTrainPosition}
-              color="red"
-            />
-          </View>
+          <SwitchArea
+            str="列車アイコンを表示する"
+            bool={iconSetting}
+            setBool={setIconSetting}
+          />
+          <SwitchArea
+            str="マップを表示する(beta)"
+            bool={mapSwitch}
+            setBool={setMapSwitch}
+          />
+          <SwitchArea
+            str="駅メニューを表示"
+            bool={stationMenu}
+            setBool={setStationMenu}
+          />
+          <SwitchArea
+            str="時刻表PDFをアプリ外で表示"
+            bool={usePDFView}
+            setBool={setUsePDFView}
+          />
+          <SwitchArea
+            str="列車メニュー"
+            bool={trainMenu}
+            setBool={setTrainMenu}
+          />
+          <SwitchArea
+            str="列車現在位置表示(alpha)"
+            bool={trainPosition}
+            setBool={setTrainPosition}
+          />
           <View style={{ flexDirection: "row", padding: 10 }}>
             <Text
               style={{
@@ -246,3 +170,22 @@ const SimpleSwitch = ({ bool, setBool, color }) => (
     onValueChange={(value) => setBool(value.toString())}
   />
 );
+const SwitchArea = ({ str, bool, setBool }) => {
+  return (
+    <View style={{ flexDirection: "row", padding: 10 }}>
+      <Text
+        style={{
+          fontSize: 25,
+          alignItems: "center",
+          alignContent: "center",
+          textAlign: "center",
+          textAlignVertical: "center",
+        }}
+      >
+        {str}
+      </Text>
+      <View style={{ flex: 1 }} />
+      <SimpleSwitch bool={bool} setBool={setBool} color="red" />
+    </View>
+  );
+};