continue generating flow, add backend connection on main tabs

src/components/InputRow.js

@@ -3,6 +3,7 @@ import { View, Text, Image, Pressable, StyleSheet } from "react-native";
 import { BlurView } from "expo-blur";
 
 import Switch from "../components/Switch";
+import OptionSelector from "../components/OptionSelector";
 import { Container, Title, Input, Button } from "../components/Dialog";
 
 import { Fonts, Style, gutters } from "../styles";
@@ -12,6 +13,15 @@ const labelOptions = {
   name: "Nouveau nom",
   email: "Nouvelle adresse email",
   password: "Nouveau mot de passe",
+  language: "Nouvelle langue",
+};
+
+const languageOptions = {
+  fr: "Français",
+  en: "English",
+  es: "Español",
+  de: "Deutsch",
+  it: "Italiano",
 };
 
 export default ({ itemKey, type, value, title, onUpdateValue }) => {
@@ -51,7 +61,11 @@ export default ({ itemKey, type, value, title, onUpdateValue }) => {
                   },
                 })}
               >
-                {itemKey === "password" ? "********" : value}
+                {itemKey === "password"
+                  ? "********"
+                  : itemKey === "language"
+                  ? languageOptions[value] || value
+                  : value}
               </Text>
 
               <Image
@@ -84,20 +98,36 @@ export default ({ itemKey, type, value, title, onUpdateValue }) => {
             value={currentPassword}
             onChangeText={(text) => setCurrentPassword(text)}
             keyboardType="visible-password"
+            type={"password"}
+            containerStyle={{ marginBottom: gutters / 2 }}
+          />
+        )}
+        {itemKey === "language" ? (
+          <OptionSelector
+            optionTypeList={languageOptions}
+            selected={inputData || "fr"}
+            setSelected={setInputData}
+            containerStyle={{ marginBottom: gutters / 2 }}
+            colorMap={{
+              fr: { primary: "#F94697", secondary: "#F946971A" },
+              en: { primary: "#7023F7", secondary: "#7023F71A" },
+              es: { primary: "#FDBA74", secondary: "#FDBA741A" },
+              de: { primary: "#60A5FA", secondary: "#60A5FA1A" },
+              it: { primary: "#34D399", secondary: "#34D3991A" },
+            }}
+          />
+        ) : (
+          <Input
+            label={labelOptions[itemKey]}
+            value={inputData}
+            onChangeText={(text) => setInputData(text)}
+            autoCapitalize={
+              ["password", "email"].includes(itemKey) ? "none" : "words"
+            }
             type={itemKey}
             containerStyle={{ marginBottom: gutters / 2 }}
           />
         )}
-        <Input
-          label={labelOptions[itemKey]}
-          value={inputData}
-          onChangeText={(text) => setInputData(text)}
-          autoCapitalize={
-            ["password", "email"].includes(itemKey) ? "none" : "words"
-          }
-          type={itemKey}
-          containerStyle={{ marginBottom: gutters / 2 }}
-        />
         <Button
           label="Valider"
           onPress={() => {