Apply full refactor updates plus pipeline/email UX confirmations
All checks were successful
Build and Push Docker Image / build (push) Successful in 10m33s
All checks were successful
Build and Push Docker Image / build (push) Successful in 10m33s
This commit is contained in:
Matt
@@ -1,329 +1,329 @@
|
||||
'use client'
|
||||
|
||||
import { use, useCallback, useState } from 'react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Progress } from '@/components/ui/progress'
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
|
||||
import { Trophy, Star, Clock, AlertCircle, Zap, Wifi, WifiOff } from 'lucide-react'
|
||||
import { useLiveVotingSSE, type VoteUpdate } from '@/hooks/use-live-voting-sse'
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ sessionId: string }>
|
||||
}
|
||||
|
||||
interface PublicSession {
|
||||
id: string
|
||||
status: string
|
||||
currentProjectId: string | null
|
||||
votingEndsAt: string | null
|
||||
presentationSettings: Record<string, unknown> | null
|
||||
allowAudienceVotes: boolean
|
||||
}
|
||||
|
||||
interface PublicProject {
|
||||
id: string | undefined
|
||||
title: string | undefined
|
||||
teamName: string | null | undefined
|
||||
averageScore: number
|
||||
voteCount: number
|
||||
}
|
||||
|
||||
function PublicScoresContent({ sessionId }: { sessionId: string }) {
|
||||
// Track SSE-based score updates keyed by projectId
|
||||
const [liveScores, setLiveScores] = useState<Record<string, { avg: number; count: number }>>({})
|
||||
|
||||
// Use public (no-auth) endpoint with reduced polling since SSE handles real-time
|
||||
const { data, isLoading, refetch } = trpc.liveVoting.getPublicResults.useQuery(
|
||||
{ sessionId },
|
||||
{ refetchInterval: 10000 }
|
||||
)
|
||||
|
||||
// SSE for real-time updates
|
||||
const onVoteUpdate = useCallback((update: VoteUpdate) => {
|
||||
setLiveScores((prev) => ({
|
||||
...prev,
|
||||
[update.projectId]: {
|
||||
avg: update.averageScore ?? 0,
|
||||
count: update.totalVotes,
|
||||
},
|
||||
}))
|
||||
}, [])
|
||||
|
||||
const onSessionStatus = useCallback(() => {
|
||||
refetch()
|
||||
}, [refetch])
|
||||
|
||||
const onProjectChange = useCallback(() => {
|
||||
refetch()
|
||||
}, [refetch])
|
||||
|
||||
const { isConnected } = useLiveVotingSSE(sessionId, {
|
||||
onVoteUpdate,
|
||||
onSessionStatus,
|
||||
onProjectChange,
|
||||
})
|
||||
|
||||
if (isLoading) {
|
||||
return <PublicScoresSkeleton />
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-[#053d57] to-[#557f8c]">
|
||||
<Alert variant="destructive" className="max-w-md">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertTitle>Session Not Found</AlertTitle>
|
||||
<AlertDescription>
|
||||
This voting session does not exist.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const session = data.session as PublicSession
|
||||
const projects = data.projects as PublicProject[]
|
||||
|
||||
const isCompleted = session.status === 'COMPLETED'
|
||||
const isVoting = session.status === 'IN_PROGRESS'
|
||||
|
||||
// Merge live SSE scores with fetched data
|
||||
const projectsWithLive = projects.map((project) => {
|
||||
const live = project.id ? liveScores[project.id] : null
|
||||
return {
|
||||
...project,
|
||||
averageScore: live ? live.avg : (project.averageScore || 0),
|
||||
voteCount: live ? live.count : (project.voteCount || 0),
|
||||
}
|
||||
})
|
||||
|
||||
// Sort projects by score for leaderboard
|
||||
const sortedProjects = [...projectsWithLive].sort(
|
||||
(a, b) => (b.averageScore || 0) - (a.averageScore || 0)
|
||||
)
|
||||
|
||||
// Find max score for progress bars
|
||||
const maxScore = Math.max(...sortedProjects.map((p) => p.averageScore || 0), 1)
|
||||
|
||||
// Get presentation settings
|
||||
const presentationSettings = session.presentationSettings
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-[#053d57] to-[#557f8c] p-4 md:p-8">
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
{/* Header */}
|
||||
<div className="text-center text-white">
|
||||
<div className="flex items-center justify-center gap-2 mb-2">
|
||||
<Zap className="h-8 w-8" />
|
||||
<h1 className="text-3xl font-bold">Live Scores</h1>
|
||||
{isConnected ? (
|
||||
<Wifi className="h-4 w-4 text-green-400" />
|
||||
) : (
|
||||
<WifiOff className="h-4 w-4 text-red-400" />
|
||||
)}
|
||||
</div>
|
||||
<Badge
|
||||
variant={isVoting ? 'default' : isCompleted ? 'secondary' : 'outline'}
|
||||
className="mt-2"
|
||||
>
|
||||
{isVoting ? 'LIVE' : isCompleted ? 'COMPLETED' : session.status}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Current project highlight */}
|
||||
{isVoting && session.currentProjectId && (
|
||||
<Card className="border-2 border-green-500 bg-green-500/10 animate-pulse">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center gap-2 text-green-400">
|
||||
<Clock className="h-5 w-5" />
|
||||
<span className="font-medium">Now Voting</span>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-xl font-semibold text-white">
|
||||
{projects.find((p) => p?.id === session.currentProjectId)?.title}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Leaderboard */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Trophy className="h-5 w-5 text-yellow-500" />
|
||||
Rankings
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{sortedProjects.length === 0 ? (
|
||||
<p className="text-muted-foreground text-center py-8">
|
||||
No scores yet
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{sortedProjects.map((project, index) => {
|
||||
if (!project) return null
|
||||
const isCurrent = project.id === session.currentProjectId
|
||||
const scoreFormat = presentationSettings?.scoreDisplayFormat as string || 'bar'
|
||||
|
||||
return (
|
||||
<div
|
||||
key={project.id}
|
||||
className={`rounded-lg p-4 transition-all duration-300 ${
|
||||
isCurrent
|
||||
? 'bg-green-500/10 border border-green-500'
|
||||
: 'bg-muted/50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Rank */}
|
||||
<div className="shrink-0 w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
|
||||
{index === 0 ? (
|
||||
<Trophy className="h-4 w-4 text-yellow-500" />
|
||||
) : index === 1 ? (
|
||||
<span className="font-bold text-gray-400">2</span>
|
||||
) : index === 2 ? (
|
||||
<span className="font-bold text-amber-600">3</span>
|
||||
) : (
|
||||
<span className="font-bold text-muted-foreground">
|
||||
{index + 1}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Project info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium truncate">{project.title}</p>
|
||||
{project.teamName && (
|
||||
<p className="text-sm text-muted-foreground truncate">
|
||||
{project.teamName}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Score */}
|
||||
<div className="shrink-0 text-right">
|
||||
{scoreFormat === 'radial' ? (
|
||||
<div className="relative w-14 h-14">
|
||||
<svg viewBox="0 0 36 36" className="w-14 h-14 -rotate-90">
|
||||
<path
|
||||
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
className="text-muted/30"
|
||||
/>
|
||||
<path
|
||||
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.5"
|
||||
strokeDasharray={`${((project.averageScore || 0) / 10) * 100}, 100`}
|
||||
className="text-primary"
|
||||
/>
|
||||
</svg>
|
||||
<span className="absolute inset-0 flex items-center justify-center text-sm font-bold">
|
||||
{project.averageScore?.toFixed(1) || '--'}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center gap-1">
|
||||
<Star className="h-4 w-4 text-yellow-500" />
|
||||
<span className="text-xl font-bold">
|
||||
{project.averageScore?.toFixed(1) || '--'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{project.voteCount} votes
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Score bar - shown for 'bar' format */}
|
||||
{scoreFormat !== 'number' && scoreFormat !== 'radial' && (
|
||||
<div className="mt-3">
|
||||
<Progress
|
||||
value={
|
||||
project.averageScore
|
||||
? (project.averageScore / maxScore) * 100
|
||||
: 0
|
||||
}
|
||||
className="h-2"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Audience voting info */}
|
||||
{session.allowAudienceVotes && isVoting && (
|
||||
<Card className="border-primary/30 bg-primary/5">
|
||||
<CardContent className="py-4 text-center">
|
||||
<p className="text-sm font-medium">
|
||||
Audience voting is enabled for this session
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
{isConnected ? (
|
||||
<Wifi className="h-3 w-3 text-green-400" />
|
||||
) : (
|
||||
<WifiOff className="h-3 w-3 text-red-400" />
|
||||
)}
|
||||
<p className="text-center text-white/60 text-sm">
|
||||
Scores update in real-time
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function PublicScoresSkeleton() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-[#053d57] to-[#557f8c] p-4 md:p-8">
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<div className="text-center">
|
||||
<Skeleton className="h-10 w-48 mx-auto" />
|
||||
<Skeleton className="h-4 w-64 mx-auto mt-2" />
|
||||
</div>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-6 w-32" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<Skeleton key={i} className="h-20 w-full" />
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function PublicScoresPage({ params }: PageProps) {
|
||||
const { sessionId } = use(params)
|
||||
|
||||
return <PublicScoresContent sessionId={sessionId} />
|
||||
}
|
||||
'use client'
|
||||
|
||||
import { use, useCallback, useState } from 'react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Progress } from '@/components/ui/progress'
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
|
||||
import { Trophy, Star, Clock, AlertCircle, Zap, Wifi, WifiOff } from 'lucide-react'
|
||||
import { useLiveVotingSSE, type VoteUpdate } from '@/hooks/use-live-voting-sse'
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ sessionId: string }>
|
||||
}
|
||||
|
||||
interface PublicSession {
|
||||
id: string
|
||||
status: string
|
||||
currentProjectId: string | null
|
||||
votingEndsAt: string | null
|
||||
presentationSettings: Record<string, unknown> | null
|
||||
allowAudienceVotes: boolean
|
||||
}
|
||||
|
||||
interface PublicProject {
|
||||
id: string | undefined
|
||||
title: string | undefined
|
||||
teamName: string | null | undefined
|
||||
averageScore: number
|
||||
voteCount: number
|
||||
}
|
||||
|
||||
function PublicScoresContent({ sessionId }: { sessionId: string }) {
|
||||
// Track SSE-based score updates keyed by projectId
|
||||
const [liveScores, setLiveScores] = useState<Record<string, { avg: number; count: number }>>({})
|
||||
|
||||
// Use public (no-auth) endpoint with reduced polling since SSE handles real-time
|
||||
const { data, isLoading, refetch } = trpc.liveVoting.getPublicResults.useQuery(
|
||||
{ sessionId },
|
||||
{ refetchInterval: 10000 }
|
||||
)
|
||||
|
||||
// SSE for real-time updates
|
||||
const onVoteUpdate = useCallback((update: VoteUpdate) => {
|
||||
setLiveScores((prev) => ({
|
||||
...prev,
|
||||
[update.projectId]: {
|
||||
avg: update.averageScore ?? 0,
|
||||
count: update.totalVotes,
|
||||
},
|
||||
}))
|
||||
}, [])
|
||||
|
||||
const onSessionStatus = useCallback(() => {
|
||||
refetch()
|
||||
}, [refetch])
|
||||
|
||||
const onProjectChange = useCallback(() => {
|
||||
refetch()
|
||||
}, [refetch])
|
||||
|
||||
const { isConnected } = useLiveVotingSSE(sessionId, {
|
||||
onVoteUpdate,
|
||||
onSessionStatus,
|
||||
onProjectChange,
|
||||
})
|
||||
|
||||
if (isLoading) {
|
||||
return <PublicScoresSkeleton />
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-[#053d57] to-[#557f8c]">
|
||||
<Alert variant="destructive" className="max-w-md">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertTitle>Session Not Found</AlertTitle>
|
||||
<AlertDescription>
|
||||
This voting session does not exist.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const session = data.session as PublicSession
|
||||
const projects = data.projects as PublicProject[]
|
||||
|
||||
const isCompleted = session.status === 'COMPLETED'
|
||||
const isVoting = session.status === 'IN_PROGRESS'
|
||||
|
||||
// Merge live SSE scores with fetched data
|
||||
const projectsWithLive = projects.map((project) => {
|
||||
const live = project.id ? liveScores[project.id] : null
|
||||
return {
|
||||
...project,
|
||||
averageScore: live ? live.avg : (project.averageScore || 0),
|
||||
voteCount: live ? live.count : (project.voteCount || 0),
|
||||
}
|
||||
})
|
||||
|
||||
// Sort projects by score for leaderboard
|
||||
const sortedProjects = [...projectsWithLive].sort(
|
||||
(a, b) => (b.averageScore || 0) - (a.averageScore || 0)
|
||||
)
|
||||
|
||||
// Find max score for progress bars
|
||||
const maxScore = Math.max(...sortedProjects.map((p) => p.averageScore || 0), 1)
|
||||
|
||||
// Get presentation settings
|
||||
const presentationSettings = session.presentationSettings
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-[#053d57] to-[#557f8c] p-4 md:p-8">
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
{/* Header */}
|
||||
<div className="text-center text-white">
|
||||
<div className="flex items-center justify-center gap-2 mb-2">
|
||||
<Zap className="h-8 w-8" />
|
||||
<h1 className="text-3xl font-bold">Live Scores</h1>
|
||||
{isConnected ? (
|
||||
<Wifi className="h-4 w-4 text-green-400" />
|
||||
) : (
|
||||
<WifiOff className="h-4 w-4 text-red-400" />
|
||||
)}
|
||||
</div>
|
||||
<Badge
|
||||
variant={isVoting ? 'default' : isCompleted ? 'secondary' : 'outline'}
|
||||
className="mt-2"
|
||||
>
|
||||
{isVoting ? 'LIVE' : isCompleted ? 'COMPLETED' : session.status}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Current project highlight */}
|
||||
{isVoting && session.currentProjectId && (
|
||||
<Card className="border-2 border-green-500 bg-green-500/10 animate-pulse">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center gap-2 text-green-400">
|
||||
<Clock className="h-5 w-5" />
|
||||
<span className="font-medium">Now Voting</span>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-xl font-semibold text-white">
|
||||
{projects.find((p) => p?.id === session.currentProjectId)?.title}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Leaderboard */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Trophy className="h-5 w-5 text-yellow-500" />
|
||||
Rankings
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{sortedProjects.length === 0 ? (
|
||||
<p className="text-muted-foreground text-center py-8">
|
||||
No scores yet
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{sortedProjects.map((project, index) => {
|
||||
if (!project) return null
|
||||
const isCurrent = project.id === session.currentProjectId
|
||||
const scoreFormat = presentationSettings?.scoreDisplayFormat as string || 'bar'
|
||||
|
||||
return (
|
||||
<div
|
||||
key={project.id}
|
||||
className={`rounded-lg p-4 transition-all duration-300 ${
|
||||
isCurrent
|
||||
? 'bg-green-500/10 border border-green-500'
|
||||
: 'bg-muted/50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Rank */}
|
||||
<div className="shrink-0 w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
|
||||
{index === 0 ? (
|
||||
<Trophy className="h-4 w-4 text-yellow-500" />
|
||||
) : index === 1 ? (
|
||||
<span className="font-bold text-gray-400">2</span>
|
||||
) : index === 2 ? (
|
||||
<span className="font-bold text-amber-600">3</span>
|
||||
) : (
|
||||
<span className="font-bold text-muted-foreground">
|
||||
{index + 1}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Project info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium truncate">{project.title}</p>
|
||||
{project.teamName && (
|
||||
<p className="text-sm text-muted-foreground truncate">
|
||||
{project.teamName}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Score */}
|
||||
<div className="shrink-0 text-right">
|
||||
{scoreFormat === 'radial' ? (
|
||||
<div className="relative w-14 h-14">
|
||||
<svg viewBox="0 0 36 36" className="w-14 h-14 -rotate-90">
|
||||
<path
|
||||
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
className="text-muted/30"
|
||||
/>
|
||||
<path
|
||||
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.5"
|
||||
strokeDasharray={`${((project.averageScore || 0) / 10) * 100}, 100`}
|
||||
className="text-primary"
|
||||
/>
|
||||
</svg>
|
||||
<span className="absolute inset-0 flex items-center justify-center text-sm font-bold">
|
||||
{project.averageScore?.toFixed(1) || '--'}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center gap-1">
|
||||
<Star className="h-4 w-4 text-yellow-500" />
|
||||
<span className="text-xl font-bold">
|
||||
{project.averageScore?.toFixed(1) || '--'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{project.voteCount} votes
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Score bar - shown for 'bar' format */}
|
||||
{scoreFormat !== 'number' && scoreFormat !== 'radial' && (
|
||||
<div className="mt-3">
|
||||
<Progress
|
||||
value={
|
||||
project.averageScore
|
||||
? (project.averageScore / maxScore) * 100
|
||||
: 0
|
||||
}
|
||||
className="h-2"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Audience voting info */}
|
||||
{session.allowAudienceVotes && isVoting && (
|
||||
<Card className="border-primary/30 bg-primary/5">
|
||||
<CardContent className="py-4 text-center">
|
||||
<p className="text-sm font-medium">
|
||||
Audience voting is enabled for this session
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
{isConnected ? (
|
||||
<Wifi className="h-3 w-3 text-green-400" />
|
||||
) : (
|
||||
<WifiOff className="h-3 w-3 text-red-400" />
|
||||
)}
|
||||
<p className="text-center text-white/60 text-sm">
|
||||
Scores update in real-time
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function PublicScoresSkeleton() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-[#053d57] to-[#557f8c] p-4 md:p-8">
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<div className="text-center">
|
||||
<Skeleton className="h-10 w-48 mx-auto" />
|
||||
<Skeleton className="h-4 w-64 mx-auto mt-2" />
|
||||
</div>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-6 w-32" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<Skeleton key={i} className="h-20 w-full" />
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function PublicScoresPage({ params }: PageProps) {
|
||||
const { sessionId } = use(params)
|
||||
|
||||
return <PublicScoresContent sessionId={sessionId} />
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user