add jury display component

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/client/src/components/jury-display.tsx

@@ -0,0 +1,73 @@
+import type { JuryRound, JuryResult } from "@celebrate-esc/shared"
+
+interface JuryDisplayProps {
+	currentRound: JuryRound | null
+	results: JuryResult[]
+}
+
+export function JuryDisplay({ currentRound, results }: JuryDisplayProps) {
+	if (currentRound) {
+		return (
+			<div className="flex flex-col items-center gap-4">
+				<p className="text-lg text-muted-foreground">Now voting</p>
+				<div className="text-center">
+					<span className="text-6xl">{currentRound.countryFlag}</span>
+					<p className="mt-2 text-3xl font-bold">{currentRound.countryName}</p>
+				</div>
+				<p className="text-muted-foreground">Rate 1-12 on your phone</p>
+			</div>
+		)
+	}
+
+	if (results.length > 0) {
+		const lastResult = results[results.length - 1]!
+		const topRated = [...results].sort((a, b) => b.averageRating - a.averageRating)[0]!
+		return (
+			<div className="flex flex-col items-center gap-6">
+				<div className="text-center">
+					<p className="text-sm font-medium text-muted-foreground">Latest result</p>
+					<span className="text-4xl">{lastResult.countryFlag}</span>
+					<p className="mt-2 text-2xl font-bold">{lastResult.countryName}</p>
+					<p className="text-4xl font-bold text-primary">{lastResult.averageRating}</p>
+					<p className="text-sm text-muted-foreground">{lastResult.totalVotes} votes</p>
+				</div>
+
+				{results.length > 1 && (
+					<div className="rounded-lg border-2 border-primary/30 bg-primary/5 p-6 text-center">
+						<p className="text-lg font-medium text-muted-foreground">
+							And 12 points go to...
+						</p>
+						<p className="mt-2 text-3xl font-bold">
+							{topRated.countryFlag} {topRated.countryName}
+						</p>
+						<p className="text-2xl font-bold text-primary">
+							{topRated.averageRating} avg
+						</p>
+					</div>
+				)}
+
+				<div className="w-full max-w-md">
+					<p className="mb-2 text-sm font-medium text-muted-foreground">Rankings</p>
+					{[...results]
+						.sort((a, b) => b.averageRating - a.averageRating)
+						.map((r, i) => (
+							<div key={r.countryCode} className="flex items-center justify-between border-b py-1 text-sm">
+								<span>
+									<span className="mr-2 font-bold text-muted-foreground">{i + 1}</span>
+									{r.countryFlag} {r.countryName}
+								</span>
+								<span className="font-medium">{r.averageRating}</span>
+							</div>
+						))}
+				</div>
+			</div>
+		)
+	}
+
+	return (
+		<div className="flex flex-col items-center gap-4 py-12">
+			<p className="text-2xl text-muted-foreground">Live Event</p>
+			<p className="text-muted-foreground">Waiting for host to open voting...</p>
+		</div>
+	)
+}