add QuizBuzzer, QuizHost, QuizDisplay components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-13 07:18:18 +01:00
parent d11c7780e9
commit 43268d8d86
3 changed files with 223 additions and 0 deletions
@@ -0,0 +1,50 @@
+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>
+	)
+}