Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 1x 8x 8x 8x 7x 6x 5x 8x 8x 5x 1x | 'use client'
import { Button } from '@mui/material'
interface QuizOptionProps {
word: string
onClick: (word: string) => void
disabled?: boolean
selected?: boolean
isCorrect?: boolean | null
}
/**
* QuizOption Component
* A button representing a word option in the quiz.
*/
export function QuizOption({
word,
onClick,
disabled = false,
selected = false,
isCorrect = null,
}: QuizOptionProps) {
const getColor = () => {
if (isCorrect === true) return 'success'
if (isCorrect === false) return 'error'
if (selected) return 'primary'
return 'inherit'
}
const getVariant = () => {
if (selected || isCorrect !== null) return 'contained'
return 'outlined'
}
return (
<Button
fullWidth
variant={getVariant()}
color={getColor()}
onClick={() => onClick(word)}
disabled={disabled}
sx={{
py: 2,
fontSize: '1.1rem',
fontWeight: 600,
textTransform: 'none',
justifyContent: 'flex-start',
px: 3,
}}
data-testid={`quiz-option-${word}`}
>
{word}
</Button>
)
}
|