Add age question

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) {

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>
+    );
+  }
+);