ajout des questions qui utilisent une checkbox

app/(quiz)/quiz.tsx

@@ -8,12 +8,17 @@ import Screen from "@/components/ui/Screen";
 import Text from "@/components/ui/Text";
 import React, { ForwardRefExoticComponent, RefAttributes } from "react";
 import { View } from "react-native";
+import GoalQuestion from "@/components/quiz/GoalQuestion";
+import LvlQuestion from "@/components/quiz/LvlQuestion";
+import GenderQuestion from "@/components/quiz/GenderQuestion";
+import ActivityQuestion from "@/components/quiz/ActivityQuestion";
+import SleepQuestion from "@/components/quiz/SleepQuestion";
 
 export default function Quiz() {
   const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0);
   const questions: ForwardRefExoticComponent<
     QuestionChildProps & RefAttributes<any>
-  >[] = [WeightQuestion, HeightQuestion];
+  >[] = [GoalQuestion, GenderQuestion, WeightQuestion, HeightQuestion, LvlQuestion, ActivityQuestion, SleepQuestion];
 
   const goBack = () => {
     if (currentQuestionIndex >= 1) {

components/CheckboxComponent.tsx

@@ -14,9 +14,9 @@ interface CheckBoxProps {
 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 border-4 border-orange-300' : 'bg-gray-300 border-4 border-gray-300'} flex-row items-center`}>
+        <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-row items-center`}>
             <View className="mr-2.5">
-            {AwesomIconList.includes(icon) ? (
+                {AwesomIconList.includes(icon) ? (
                 <FontAwesome6 name={icon} size={30} color={value ? "white" : "black"}/>
             ) : (
                 <AntDesign name={icon ?? "arrowleft"} size={30} color={value ? "white" : "black"}/>

components/quiz/ActivityQuestion.tsx

@@ -0,0 +1,48 @@
+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 => {
+        const { ...rest } = props;
+
+        const [checkedOne, setCheckedOne] = React.useState(false);
+        const [checkedTwo, setCheckedTwo] = React.useState(false);
+        const [checkedThree, setCheckedThree] = React.useState(false);
+        const [checkedFour, setCheckedFour] = React.useState(false);
+        const [checkedFive, setCheckedFive] = React.useState(false);
+        const handleChangeOne = () => {
+            setCheckedOne(!checkedOne);
+        };
+        const handleChangeTwo = () => {
+            setCheckedTwo(!checkedTwo);
+        };
+        const handleChangeThree = () => {
+            setCheckedThree(!checkedThree);
+        };
+        const handleChangeFour = () => {
+            setCheckedFour(!checkedFour);
+        };
+        const handleChangeFive = () => {
+            setCheckedFive(!checkedFive);
+        };
+
+        return (
+            <Question
+                question="Comment estimez-vous votre niveau d'activité ?"
+                {...ref}
+                {...rest}
+            >
+                <View>
+                    <Checkbox label="Athlète" value={checkedOne} onChange={handleChangeOne} icon={"smile-circle"} />
+                    <Checkbox label="Très sportif" value={checkedTwo} onChange={handleChangeTwo} icon={"smileo"} />
+                    <Checkbox label="Un peu sportif" value={checkedThree} onChange={handleChangeThree} icon={"meh"} />
+                    <Checkbox label="Peu sportif" value={checkedFour} onChange={handleChangeFour} icon={"frowno"} />
+                    <Checkbox label="Pas du tout sportif" value={checkedFive} onChange={handleChangeFive} icon={"frown"} />
+                </View>
+            </Question>
+        );
+    }
+);

components/quiz/GenderQuestion.tsx

@@ -0,0 +1,38 @@
+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 => {
+        const { ...rest } = props;
+
+        const [checkedOne, setCheckedOne] = React.useState(false);
+        const [checkedTwo, setCheckedTwo] = React.useState(false);
+        const [checkedThree, setCheckedThree] = React.useState(false);
+        const handleChangeOne = () => {
+            setCheckedOne(!checkedOne);
+        };
+        const handleChangeTwo = () => {
+            setCheckedTwo(!checkedTwo);
+        };
+        const handleChangeThree = () => {
+            setCheckedThree(!checkedThree);
+        };
+
+        return (
+            <Question
+                question="Quel est votre genre physiologique ?"
+                {...ref}
+                {...rest}
+            >
+                <View>
+                    <Checkbox label="Homme" value={checkedOne} onChange={handleChangeOne} icon={"man"} />
+                    <Checkbox label="Femme" value={checkedTwo} onChange={handleChangeTwo} icon={"woman"} />
+                    <Checkbox label="Je ne préfère pas répondre" value={checkedThree} onChange={handleChangeThree} icon={"minuscircle"} />
+                </View>
+            </Question>
+        );
+    }
+);

components/quiz/SleepQuestion.tsx

@@ -0,0 +1,48 @@
+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 => {
+        const { ...rest } = props;
+
+        const [checkedOne, setCheckedOne] = React.useState(false);
+        const [checkedTwo, setCheckedTwo] = React.useState(false);
+        const [checkedThree, setCheckedThree] = React.useState(false);
+        const [checkedFour, setCheckedFour] = React.useState(false);
+        const [checkedFive, setCheckedFive] = React.useState(false);
+        const handleChangeOne = () => {
+            setCheckedOne(!checkedOne);
+        };
+        const handleChangeTwo = () => {
+            setCheckedTwo(!checkedTwo);
+        };
+        const handleChangeThree = () => {
+            setCheckedThree(!checkedThree);
+        };
+        const handleChangeFour = () => {
+            setCheckedFour(!checkedFour);
+        };
+        const handleChangeFive = () => {
+            setCheckedFive(!checkedFive);
+        };
+
+        return (
+            <Question
+                question="Quelle est la qualité de votre sommeil ?"
+                {...ref}
+                {...rest}
+            >
+                <View>
+                    <Checkbox label="Excellente" value={checkedOne} onChange={handleChangeOne} icon={"smile-circle"} />
+                    <Checkbox label="Bien" value={checkedTwo} onChange={handleChangeTwo} icon={"smileo"} />
+                    <Checkbox label="Mauvaise" value={checkedThree} onChange={handleChangeThree} icon={"meh"} />
+                    <Checkbox label="Très mauvaise" value={checkedFour} onChange={handleChangeFour} icon={"frowno"} />
+                    <Checkbox label="Insomniaque" value={checkedFive} onChange={handleChangeFive} icon={"frown"} />
+                </View>
+            </Question>
+        );
+    }
+);