66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { ButtonWrapper } from '../App.style';
|
|
import { AnswerObject } from '../Types';
|
|
import { Capitalize } from '../Utils';
|
|
|
|
type Props = {
|
|
answers: string[];
|
|
callback: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
difficulty: string;
|
|
question: string;
|
|
category: string;
|
|
questionNr: number;
|
|
score: number;
|
|
totalQuestions: number;
|
|
userAnswer: AnswerObject | undefined;
|
|
};
|
|
|
|
const QuestionCard: React.FC<Props> = ({
|
|
answers,
|
|
callback,
|
|
difficulty,
|
|
question,
|
|
category,
|
|
questionNr,
|
|
score,
|
|
totalQuestions,
|
|
userAnswer
|
|
}) => (
|
|
<div className="question-card-wrapper">
|
|
<div className="details">
|
|
<div>Difficulty: {Capitalize(difficulty)}</div>
|
|
<div>{category}</div>
|
|
</div>
|
|
<div className="details">
|
|
<div>
|
|
Question: {questionNr}/{totalQuestions}
|
|
</div>
|
|
<div>Score: {score}</div>
|
|
</div>
|
|
|
|
{!(questionNr === totalQuestions) && (
|
|
<>
|
|
<p
|
|
className="question"
|
|
dangerouslySetInnerHTML={{ __html: question }}
|
|
/>
|
|
<div>
|
|
{answers.map((answer) => (
|
|
<ButtonWrapper
|
|
correct={userAnswer?.correctAnswer === answer}
|
|
userClicked={userAnswer?.answer === answer}
|
|
key={answer}
|
|
>
|
|
<button disabled={!!userAnswer} onClick={callback} value={answer}>
|
|
<span dangerouslySetInnerHTML={{ __html: answer }} />
|
|
</button>
|
|
</ButtonWrapper>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
export default QuestionCard;
|