From c89f9e7ad0aae007c63ba6352649e837459136ad Mon Sep 17 00:00:00 2001
From: Anthony RICHARD <Anthony.RICHARD@etu.uca.fr>
Date: Fri, 24 Jan 2025 10:02:43 +0100
Subject: [PATCH] Add age question

---
 app/(quiz)/quiz.tsx             |  9 +++++++-
 components/quiz/AgeQuestion.tsx | 40 +++++++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 components/quiz/AgeQuestion.tsx

diff --git a/app/(quiz)/quiz.tsx b/app/(quiz)/quiz.tsx
index dca9eb2..f9f5b5a 100644
--- a/app/(quiz)/quiz.tsx
+++ b/app/(quiz)/quiz.tsx
@@ -1,5 +1,6 @@
 import BackButton from "@/components/BackButton";
 import { toBgColor, toTextColor } from "@/components/Constants";
+import AgeQuestion from "@/components/quiz/AgeQuestion";
 import BeginnerQuestion from "@/components/quiz/BeginnerQuestion";
 import GoalQuestion from "@/components/quiz/GoalQuestion";
 import HeightQuestion from "@/components/quiz/HeightQuestion";
@@ -15,7 +16,13 @@ export default function Quiz() {
   const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0);
   const questions: ForwardRefExoticComponent<
     QuestionChildProps & RefAttributes<any>
-  >[] = [GoalQuestion, WeightQuestion, HeightQuestion, BeginnerQuestion];
+  >[] = [
+    GoalQuestion,
+    WeightQuestion,
+    HeightQuestion,
+    AgeQuestion,
+    BeginnerQuestion,
+  ];
 
   const goBack = () => {
     if (currentQuestionIndex >= 1) {
diff --git a/components/quiz/AgeQuestion.tsx b/components/quiz/AgeQuestion.tsx
new file mode 100644
index 0000000..d262412
--- /dev/null
+++ b/components/quiz/AgeQuestion.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import Question, { QuestionChildProps } from "./Question";
+import Slider from "../ui/Slider";
+import { View } from "react-native";
+import Text from "../ui/Text";
+
+export default React.forwardRef<any, QuestionChildProps>(
+  (props, ref): React.ReactElement => {
+    const MIN_AGE = 18;
+    const MAX_AGE = 100;
+    const [age, setAge] = React.useState(MIN_AGE);
+    return (
+      <Question question="Quel âge avez-vous ?" {...ref} {...props}>
+        <View className="flex-row justify-center">
+          {age <= MIN_AGE ? (
+            <Text className="mt-8" size="4xl">
+              - de
+            </Text>
+          ) : null}
+          {age >= MAX_AGE ? (
+            <Text className="mt-8" size="4xl">
+              + de
+            </Text>
+          ) : null}
+          <Text size="8xl" weight="bold">
+            {age}
+          </Text>
+          <Text className="mt-8" size="4xl">
+            ans
+          </Text>
+        </View>
+        <Slider
+          minimumValue={MIN_AGE}
+          maximumValue={MAX_AGE}
+          onValueChange={setAge}
+        />
+      </Question>
+    );
+  }
+);