You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Mobile/app/(quiz)/quiz.tsx

62 lines
2.3 KiB

import BackButton from "@/components/BackButton";
import { toBgColor, toTextColor } from "@/components/Constants";
import BeginnerQuestion from "@/components/quiz/BeginnerQuestion";
import HeightQuestion from "@/components/quiz/HeightQuestion";
import { QuestionChildProps } from "@/components/quiz/Question";
import WeightQuestion from "@/components/quiz/WeightQuestion";
import Button from "@/components/ui/Button";
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>
>[] = [GoalQuestion, GenderQuestion, WeightQuestion, HeightQuestion, LvlQuestion, ActivityQuestion, SleepQuestion];
const goBack = () => {
if (currentQuestionIndex >= 1) {
setCurrentQuestionIndex(currentQuestionIndex - 1);
}
};
const goNext = () => {
if (currentQuestionIndex < questions.length - 1) {
setCurrentQuestionIndex(currentQuestionIndex + 1);
}
};
return (
<Screen>
<View className="gap-4 justify-between h-full">
<View className="flex-row justify-between items-center">
<BackButton onPress={goBack} />
<View className={"px-4 py-2 rounded-2xl" + " " + toBgColor("blue")}>
<Text className={toTextColor("blue")} weight="bold">
{currentQuestionIndex + 1} sur {questions.length}
</Text>
</View>
</View>
{questions.map((QuestionComponent, index) => (
<React.Fragment key={index}>
{index == currentQuestionIndex && (
<QuestionComponent isVisible={true} />
)}
</React.Fragment>
))}
<Button afterIcon="arrowright" onPress={goNext}>
Suivant
</Button>
</View>
</Screen>
);
}