Quiz - Copy this React, Tailwind Component to your project

Xem lại phần Quiz này làm lại phần UI thật đẹp và đủ 5 type handle lỗi TypeError: Cannot read properties of undefined (reading 'length') handleTrueFalseAnswer, 40 | }) => { > 41 | if (unknownWords.length === 0) { | ^ 42 | return <p className="text lg font semibold">Bạn đã ôn tập xong từ vựng!</p>; 43 | } 44 |'use client'; import React from 'react'; import { Button } from '@/components/ui/button'; import type { Vocabulary } from './types'; import { FaSoundcloud } from 'react icons/fa6'; interface QuizSectionProps { quizType: string; unknownWords: Vocabulary[]; multipleChoiceAnswers: string[]; multipleChoiceMeanings: string[]; selectedAnswer: string | null; correct: boolean | null; inputAnswer: string; trueFalseQuestion: string; handleMultipleChoiceAnswer: (selected: string) => void; handleMultipleChoiceMeaningAnswer: (selected: string) => void; handleFillInAnswer: () => void; handleHint: () => void; setInputAnswer: (value: string) => void; handleTrueFalseAnswer: (value: boolean) => void; } const QuizSection: React.FC<QuizSectionProps> = ({ quizType, unknownWords, multipleChoiceAnswers, multipleChoiceMeanings, selectedAnswer, correct, inputAnswer, trueFalseQuestion, handleMultipleChoiceAnswer, handleMultipleChoiceMeaningAnswer, handleFillInAnswer, handleHint, setInputAnswer, handleTrueFalseAnswer, }) => { if (unknownWords.length === 0) { return <p className="text lg font semibold">Bạn đã ôn tập xong từ vựng!</p>; } switch (quizType) { case "multipleChoiceMeaning": return ( <div className="space y 4"> <p className="text lg mb 2 text center text [0.9rem]"> Chọn nghĩa đúng cho từ: "{unknownWords[0]?.word}" </p> <ul className="grid grid cols 2 gap 10"> {multipleChoiceMeanings.map((option) => ( <li key={option} className="flex flex col items center"> <Button className={`w 24 h 24 ${ selectedAnswer === option ? correct && option === unknownWords[0].meaningVn ? "bg green 500" : "bg red 500" : "bg blue 500" } text white`} onClick={() => handleMultipleChoiceMeaningAnswer(option)} disabled={selectedAnswer !== null} > {option} </Button> </li> ))} </ul> </div> ); case "multipleChoice": return ( <div className="space y 4"> <p className="text lg mb 2 text center text [0.9rem]"> Chọn từ đúng cho nghĩa tiếng Việt: "{unknownWords[0].meaningVn}" </p> <ul className="grid grid cols 2 gap 10"> {multipleChoiceAnswers.map((option) => ( <li key={option} className="flex flex col items center"> <Button className={`w 24 h 24 rounded full ${ selectedAnswer === option ? correct && option === unknownWords[0].word ? "bg green 500" : "bg red 500" : "bg blue 500" } text white`} onClick={() => handleMultipleChoiceAnswer(option)} disabled={selectedAnswer !== null} > <FaSoundcloud className="h 12 w 12" /> </Button> {option} </li> ))} </ul> </div> ); case "fillIn": return ( <div className="space y 4 w full max w md"> <p className="text lg mb 2 text center text [0.75rem]"> Điền từ đúng cho nghĩa tiếng Việt: "{unknownWords[0].meaningVn}" </p> <input type="text" value={inputAnswer} onChange={(e) => setInputAnswer(e.target.value)} className={`w full p 2 border rounded ${ correct === true ? "bg green 500 text white" : correct === false ? "bg red 500 text white" : "" }`} /> <div className="flex gap 4"> <Button variant="outline" className="w 1/2" onClick={handleHint} > Gợi ý (2) Nhấn Shift </Button> <Button className="w 1/2" onClick={handleFillInAnswer} > Kiểm tra Nhấn Enter </Button> </div> </div> ); case "trueFalse": return ( <div className="bg white rounded lg p 4 h [300px] w full max w md"> <div className="flex flex col items center justify center gap 10 mb 8"> <div className="font bold text xl">{unknownWords[0].word}</div> <div className="italic text primary">có nghĩa là</div> <div className="text xl">"{trueFalseQuestion}"</div> </div> <div className="flex gap 4"> <Button className="w 1/2" onClick={() => handleTrueFalseAnswer(true)} > Đúng </Button> <Button variant="outline" className="w 1/2" onClick={() => handleTrueFalseAnswer(false)} > Sai </Button> </div> </div> ); default: return null; } }; export default QuizSection;