Untitled

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Box, Button, Input, Select, Text, VStack } from '@chakra-ui/react';

const Home = () => {
  const navigate = useNavigate();
  const [name, setName] = useState('');
  const [category, setCategory] = useState('');
  const [difficulty, setDifficulty] = useState('');
  const [numQuestions, setNumQuestions] = useState(10);

  const startQuiz = () => {
    navigate('/quiz', {
      state: { name, category, difficulty, numQuestions },
    });
  };

  return (
    <>
    
   
    <Box p={5} w="660px" m="auto" mt="20vh">
    
      <VStack spacing={4}>
      <Text align="center" fontSize='2xl'>Set up your Quiz</Text>
        <Input placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
        <Select placeholder="Category" onChange={(e) => setCategory(e.target.value)}>
          <option value="9">General Knowledge</option>
          <option value="21">Sports</option>
          <option value="22">Geography</option>
        </Select>
        <Select placeholder="Difficulty" onChange={(e) => setDifficulty(e.target.value)}>
          <option value="easy">Easy</option>
          <option value="medium">Medium</option>
          <option value="hard">Hard</option>
        </Select>
        <Input type="number" placeholder="Number of Questions" value={numQuestions} onChange={(e) => setNumQuestions(e.target.value)} />
        <Button onClick={startQuiz} w="100%" bg="red" color="white">Start Quiz</Button>
      </VStack>
    </Box>
   
    </>
  );
};

export default Home;