Untitled

import React, { useState } from 'react';
import { ChakraProvider, Box, VStack } from '@chakra-ui/react';
import QuizSetup from './components/QuizSetup';
import Quiz from './components/Quiz';
import Result from './components/Result';

const App = () => {
    const [quizStarted, setQuizStarted] = useState(false);
    const [quizEnded, setQuizEnded] = useState(false);

    const handleStartQuiz = () => {
        setQuizStarted(true);
        setQuizEnded(false);
    };

    const handleEndQuiz = () => {
        setQuizEnded(true);
        setQuizStarted(false);
    };

    const handleRestartQuiz = () => {
        setQuizEnded(false);
    };

    return (
        <ChakraProvider>
            <Box p={8} maxWidth="800px" mx="auto" mt={10}>
                <VStack spacing={4}>
                    {!quizStarted && !quizEnded && <QuizSetup startQuiz={handleStartQuiz} />}
                    {quizStarted && !quizEnded && <Quiz endQuiz={handleEndQuiz} />}
                    {quizEnded && <Result restartQuiz={handleRestartQuiz} />}
                </VStack>
            </Box>
        </ChakraProvider>
    );
};

export default App;