add sport question

app/(quiz)/quiz.tsx

@@ -14,6 +14,7 @@ import AgeQuestion from "@/components/quiz/AgeQuestion";
 import BeginnerQuestion from "@/components/quiz/BeginnerQuestion";
 import LvlQuestion from "@/components/quiz/LvlQuestion";
 import SleepQuestion from "@/components/quiz/SleepQuestion";
+import SportQuestion from "@/components/quiz/SportQuestion";
 
 export default function Quiz() {
   const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0);
@@ -30,6 +31,7 @@ export default function Quiz() {
     { component: BeginnerQuestion, props: {} },
     { component: LvlQuestion, props: {} },
     { component: FrequencyQuestion, props: { isMale: true } },
+    { component: SportQuestion, props: {} },
     { component: SleepQuestion, props: {} },
   ];
 

components/CheckButtonComponent.tsx

@@ -1,29 +1,67 @@
 import React, {Component} from "react";
 import {View, Text, TouchableOpacity, Image} from "react-native";
-import {AntDesign, FontAwesome6} from "@expo/vector-icons";
+import {
-import {AntDesignIconNames} from "./Icons";
+    AntDesign,
+    Entypo,
+    FontAwesome6,
+    MaterialCommunityIcons,
+} from "@expo/vector-icons";
+import {
+    AntDesignIconNames,
+    CommunityIconNames,
+    EntypoIconNames,
+    FontAwesomeIconNames,
+} from "./Icons";
 
 interface CheckButtonProps {
     label: string;
     value: boolean;
     onChange: () => void;
-    icon: AntDesignIconNames | string;
+    antIcon?: AntDesignIconNames;
+    entypoIcon?: EntypoIconNames;
+    fontAwesomeIcon?: FontAwesomeIconNames;
+    communityIcon?: CommunityIconNames;
 }
 
-const CheckButton: React.FC<CheckButtonProps> = ({ label, value, onChange, icon }) => {
+const CheckButton: React.FC<CheckButtonProps> = ({ label, value, onChange, antIcon,
-    let AwesomIconList = ["weight-scale", "beer"];
+                                                     entypoIcon,
+                                                     fontAwesomeIcon,
+                                                     communityIcon, }) => {
     return (
-        <TouchableOpacity onPress={onChange} className={`p-5 m-1 rounded-3xl ${value ? 'bg-orange-600 border-4 border-orange-300' : 'bg-gray-300 border-4 border-gray-300'} flex-basis-1/3 items-center`}>
+        <View style={{ flexBasis: "33.33%"}}>
-            <View className="mr-2.5">
+        <TouchableOpacity onPress={onChange} className={`p-5 m-1 rounded-3xl ${value ? 'bg-orange-600 border-4 border-orange-300' : 'bg-gray-300 border-4 border-gray-300'} items-center`}>
-                {AwesomIconList.includes(icon) ? (
+            {antIcon ? (
-                    <FontAwesome6 name={icon} size={30} color={value ? "white" : "black"}/>
+                <AntDesign
-                ) : (
+                    name={antIcon}
-                    <AntDesign name={icon ?? "arrowleft"} size={30} color={value ? "white" : "black"}/>
+                    size={30}
-                )}
+                    color={value ? "white" : "black"}
-            </View>
+                />
+            ) : null}
+            {entypoIcon ? (
+                <Entypo
+                    name={entypoIcon}
+                    size={30}
+                    color={value ? "white" : "black"}
+                />
+            ) : null}
+            {communityIcon ? (
+                <MaterialCommunityIcons
+                    name={communityIcon}
+                    size={30}
+                    color={value ? "white" : "black"}
+                />
+            ) : null}
+            {fontAwesomeIcon ? (
+                <FontAwesome6
+                    name={fontAwesomeIcon}
+                    size={30}
+                    color={value ? "white" : "black"}
+                />
+            ) : null}
 
-            <Text className={`${value ? 'text-white' : 'text-black'} flex-1`}>{label}</Text>
+            <Text className={`${value ? 'text-white' : 'text-black'}`}>{label}</Text>
         </TouchableOpacity>
+        </View>
     );
 };
 

components/quiz/SportQuestion.tsx

@@ -141,18 +141,18 @@ export default React.forwardRef<any, QuestionChildProps>(
                 {...ref}
                 {...rest}
             >
-                <View className={`flex-wrap max-h-fit`}>
+                <View className={`flex-wrap flex-row`}>
-                    <CheckButton label="Course" value={checkedOne} onChange={handleChangeOne} icon={"smile-circle"} />
+                    <CheckButton label="Course" value={checkedOne} onChange={handleChangeOne} fontAwesomeIcon={"person-running"} />
-                    <CheckButton label="Marche" value={checkedTwo} onChange={handleChangeTwo} icon={"smileo"} />
+                    <CheckButton label="Marche" value={checkedTwo} onChange={handleChangeTwo} fontAwesomeIcon={"person-walking"} />
-                    <CheckButton label="Rando" value={checkedThree} onChange={handleChangeThree} icon={"meh"} />
+                    <CheckButton label="Rando" value={checkedThree} onChange={handleChangeThree} fontAwesomeIcon={"person-hiking"} />
 
-                    <CheckButton label="Skate" value={checkedFour} onChange={handleChangeFour} icon={"frowno"} />
+                    <CheckButton label="Skate" value={checkedFour} onChange={handleChangeFour} communityIcon={"skateboarding"} />
-                    <CheckButton label="Cyclisme" value={checkedFive} onChange={handleChangeFive} icon={"frown"} />
+                    <CheckButton label="Cyclisme" value={checkedFive} onChange={handleChangeFive} communityIcon={"bike"} />
-                    <CheckButton label="Basket" value={checkedSix} onChange={handleChangeSix} icon={"frown"} />
+                    <CheckButton label="Basket" value={checkedSix} onChange={handleChangeSix} fontAwesomeIcon={"basketball"} />
 
-                    <CheckButton label="Cardio" value={checkedSeven} onChange={handleChangeSeven} icon={"frown"} />
+                    <CheckButton label="Cardio" value={checkedSeven} onChange={handleChangeSeven} antIcon={"heart"} />
-                    <CheckButton label="Yoga" value={checkedEight} onChange={handleChangeEight} icon={"frown"} />
+                    <CheckButton label="Yoga" value={checkedEight} onChange={handleChangeEight} communityIcon={"yoga"} />
-                    <CheckButton label="Autre" value={checkedNine} onChange={handleChangeNine} icon={"frown"} />
+                    <CheckButton label="Autre" value={checkedNine} onChange={handleChangeNine} antIcon={"setting"} />
                 </View>
             </Question>
         );