Add checkbox component + style + answers on Goals Questions

components/CheckboxComponent.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+
+interface CheckBoxProps {
+    label: string;
+    value: boolean;
+    onChange: () => void;
+}
+
+const CheckBox: React.FC<CheckBoxProps> = ({ label, value, onChange }) => {
+    return (
+        <TouchableOpacity onPress={onChange} className={`p-5 m-1 rounded-2xl ${value ? 'bg-orange-600' : 'bg-gray-300'} flex-row items-center`}>
+            <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" />}
+            </View>
+            <Text>{label}</Text>
+        </TouchableOpacity>
+    );
+};
+
+export default CheckBox;

components/quiz/GoalQuestion.tsx

@@ -1,15 +1,47 @@
 import React from "react";
 import Question, { QuestionChildProps } from "./Question";
+import Checkbox from "../CheckboxComponent";
+import {View} from "react-native";
 
 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="Quel est votre objectif dans l'application ?"
         {...ref}
         {...rest}
-      ></Question>
+      >
+          <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} />
+          </View>
+      </Question>
     );
   }
 );