diff --git a/app/(quiz)/_layout.tsx b/app/(quiz)/_layout.tsx new file mode 100644 index 0000000..b4ef1de --- /dev/null +++ b/app/(quiz)/_layout.tsx @@ -0,0 +1,9 @@ +import { Stack } from "expo-router"; + +export default function QuizLayout() { + return ( + + + + ); +} diff --git a/app/(quiz)/quiz.tsx b/app/(quiz)/quiz.tsx new file mode 100644 index 0000000..dc59fdd --- /dev/null +++ b/app/(quiz)/quiz.tsx @@ -0,0 +1,53 @@ +import BackButton from "@/components/BackButton"; +import GoalQuestion from "@/components/quiz/GoalQuestion"; +import LvlQuestion from "@/components/quiz/LvlQuestion"; +import { QuestionChildProps } from "@/components/quiz/Question"; +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"; + +export default function Quiz() { + const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0); + const questions: ForwardRefExoticComponent< + QuestionChildProps & RefAttributes + >[] = [GoalQuestion, LvlQuestion]; + + const goBack = () => { + if (currentQuestionIndex >= 1) { + setCurrentQuestionIndex(currentQuestionIndex - 1); + } + }; + + const goNext = () => { + if (currentQuestionIndex < questions.length - 1) { + setCurrentQuestionIndex(currentQuestionIndex + 1); + } + }; + + return ( + + + + + + + Question {currentQuestionIndex + 1} / {questions.length} + + + + {questions.map((QuestionComponent, index) => ( + + {index == currentQuestionIndex && ( + + )} + + ))} + + + + ); +} diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index e6ee3da..6126317 100644 --- a/app/(tabs)/_layout.tsx +++ b/app/(tabs)/_layout.tsx @@ -18,7 +18,7 @@ export default function TabBarLayout() { if (!session) { // On web, static rendering will stop here as the user is not authenticated // in the headless Node process that the pages are rendered in. - return ; + return ; } return ( ( + (props, ref): React.ReactElement => { + const { ...rest } = props; + return ( + + ); + } +); diff --git a/components/quiz/LvlQuestion.tsx b/components/quiz/LvlQuestion.tsx new file mode 100644 index 0000000..df81f7c --- /dev/null +++ b/components/quiz/LvlQuestion.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import Question, { QuestionChildProps } from "./Question"; + +export default React.forwardRef( + (props, ref): React.ReactElement => { + const { ...rest } = props; + return ( + + ); + } +); diff --git a/components/quiz/Question.tsx b/components/quiz/Question.tsx new file mode 100644 index 0000000..e9bafe7 --- /dev/null +++ b/components/quiz/Question.tsx @@ -0,0 +1,29 @@ +import Text from "@/components/ui/Text"; +import React from "react"; +import { View, ViewProps } from "react-native"; + +export interface QuestionChildProps extends ViewProps { + isVisible: boolean; +} + +interface QuestionProps extends QuestionChildProps { + question: string; +} + +export default React.forwardRef( + (props, ref): React.ReactElement => { + const { question, isVisible, children, ...rest } = props; + const getClassName = () => { + return "gap-4" + " " + (isVisible ? "block" : "hidden"); + }; + + return ( + + + {question} + + {children} + + ); + } +);