From b39353f454a220a558bcaa645a025e6d13cf1622 Mon Sep 17 00:00:00 2001
From: "vianney.jourdy" <vianney.jourdy@etu.uca.fr>
Date: Tue, 21 Jan 2025 22:55:27 +0100
Subject: [PATCH] Add checkbox component + style + answers on Goals Questions

---
 components/CheckboxComponent.tsx | 21 ++++++++++++++++++++
 components/quiz/GoalQuestion.tsx | 34 +++++++++++++++++++++++++++++++-
 2 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 components/CheckboxComponent.tsx

diff --git a/components/CheckboxComponent.tsx b/components/CheckboxComponent.tsx
new file mode 100644
index 0000000..46e563c
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/components/quiz/GoalQuestion.tsx b/components/quiz/GoalQuestion.tsx
index 79ccb1c..b5f4dbc 100644
--- a/components/quiz/GoalQuestion.tsx
+++ b/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>
     );
   }
 );