51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import type { QuizQuestion } from "@celebrate-esc/shared"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
|
|
interface QuizDisplayProps {
|
|
question: QuizQuestion
|
|
}
|
|
|
|
const difficultyColors: Record<string, string> = {
|
|
easy: "text-green-600",
|
|
medium: "text-yellow-600",
|
|
hard: "text-red-600",
|
|
}
|
|
|
|
export function QuizDisplay({ question }: QuizDisplayProps) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center justify-between">
|
|
<span>Quiz — Question {question.index + 1}/{question.total}</span>
|
|
<span className={`${difficultyColors[question.difficulty] ?? ""}`}>
|
|
{question.difficulty}
|
|
</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col gap-6">
|
|
<p className="text-center text-2xl font-semibold">{question.text}</p>
|
|
|
|
{question.status === "buzzing" && (
|
|
<p className="text-center text-xl text-muted-foreground">
|
|
Buzz in to answer!
|
|
</p>
|
|
)}
|
|
|
|
{question.status === "judging" && question.buzzerName && (
|
|
<p className="text-center text-xl font-semibold">
|
|
{question.buzzerName} buzzed in!
|
|
</p>
|
|
)}
|
|
|
|
{question.status === "resolved" && (
|
|
<p className="text-center text-xl">
|
|
{question.wasCorrect
|
|
? `✓ ${question.buzzerName} got it right!`
|
|
: "✗ No one got it right."}
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|