modification des boutons

components/CheckboxComponent.tsx

@@ -1,19 +1,33 @@
-import React from "react";
-import { View, Text, TouchableOpacity } from "react-native";
+import React, {Component} from "react";
+import {View, Text, TouchableOpacity, Image} from "react-native";
+import {AntDesign, FontAwesome6} from "@expo/vector-icons";
+import {AntDesignIconNames} from "./Icons";
+import PropTypes, {string} from "prop-types";
 
 interface CheckBoxProps {
     label: string;
     value: boolean;
     onChange: () => void;
+    icon: AntDesignIconNames | string;
 }
 
-const CheckBox: React.FC<CheckBoxProps> = ({ label, value, onChange }) => {
+const CheckBox: React.FC<CheckBoxProps> = ({ label, value, onChange, icon }) => {
+    let AwesomIconList = ["weight-scale", "beer"];
     return (
-        <TouchableOpacity onPress={onChange} className={`p-5 m-1 rounded-2xl ${value ? 'bg-orange-600' : 'bg-gray-300'} flex-row items-center`}>
+        <TouchableOpacity onPress={onChange} className={`p-5 m-1 rounded-2xl ${value ? 'bg-orange-600 border-4 border-orange-300' : 'bg-gray-300 border-4 border-gray-300'} flex-row items-center`}>
+            <View className="mr-2.5">
+            {AwesomIconList.includes(icon) ? (
+                <FontAwesome6 name={icon} size={30} color={value ? "white" : "black"}/>
+            ) : (
+                <AntDesign name={icon ?? "arrowleft"} size={30} color={value ? "white" : "black"}/>
+            )}
+            </View>
+
+            <Text className={`${value ? 'text-white' : 'text-black'} flex-1`}>{label}</Text>
+
             <View className={`h-5 w-5 rounded border ${value ? 'border-white' : 'border-black'} items-center justify-center mr-2.5`}>
-                {value && <View className="h-3 w-3 bg-white" />}
+                {value && <View className="h-2 w-2 bg-white" />}
             </View>
-            <Text>{label}</Text>
         </TouchableOpacity>
     );
 };

components/Icons.tsx

@@ -1,3 +1,3 @@
 import { AntDesign } from "@expo/vector-icons";
 
-export type AntDesignIconNames = keyof typeof AntDesign.glyphMap;
+export type AntDesignIconNames = keyof typeof AntDesign.glyphMap;

components/quiz/GoalQuestion.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import Question, { QuestionChildProps } from "./Question";
 import Checkbox from "../CheckboxComponent";
 import {View} from "react-native";
+import {FontAwesome6} from "@expo/vector-icons";
 
 export default React.forwardRef<any, QuestionChildProps>(
   (props, ref): React.ReactElement => {
@@ -35,11 +36,11 @@ export default React.forwardRef<any, QuestionChildProps>(
         {...rest}
       >
           <View>
-              <Checkbox label="Perte de poids" value={checkedOne} onChange={handleChangeOne} />
-              <Checkbox label="Renforcement musculaire" value={checkedTwo} onChange={handleChangeTwo} />
-              <Checkbox label="Prise de masse" value={checkedThree} onChange={handleChangeThree} />
-              <Checkbox label="Amélioration endurance" value={checkedFour} onChange={handleChangeFour} />
-              <Checkbox label="Maintenir en forme" value={checkedFive} onChange={handleChangeFive} />
+              <Checkbox label="Perte de poids" value={checkedOne} onChange={handleChangeOne} icon="weight-scale" />
+              <Checkbox label="Renforcement musculaire" value={checkedTwo} onChange={handleChangeTwo} icon={"rest"} />
+              <Checkbox label="Prise de masse" value={checkedThree} onChange={handleChangeThree} icon="beer" />
+              <Checkbox label="Amélioration endurance" value={checkedFour} onChange={handleChangeFour} icon={"linechart"} />
+              <Checkbox label="Maintenir en forme" value={checkedFive} onChange={handleChangeFive} icon={"linechart"} />
           </View>
       </Question>
     );

components/quiz/Question.tsx

@@ -26,4 +26,4 @@ export default React.forwardRef<any, QuestionProps>(
       </View>
     );
   }
-);
+);