53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Clock } from 'lucide-react';
|
|
|
|
interface WaitingToRejoinProps {
|
|
playerName: string;
|
|
score: number;
|
|
}
|
|
|
|
export const WaitingToRejoin: React.FC<WaitingToRejoinProps> = ({ playerName, score }) => {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center min-h-screen p-6 text-center">
|
|
<motion.div
|
|
initial={{ scale: 0.8, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
className="bg-white/10 backdrop-blur-md p-8 md:p-12 rounded-[2rem] border-4 border-white/20 shadow-xl max-w-md w-full"
|
|
>
|
|
<motion.div
|
|
animate={{ rotate: 360 }}
|
|
transition={{ repeat: Infinity, duration: 3, ease: "linear" }}
|
|
className="bg-green-500 p-6 rounded-full inline-block mb-6 shadow-lg"
|
|
>
|
|
<Clock size={48} className="text-white" />
|
|
</motion.div>
|
|
|
|
<h1 className="text-3xl font-black font-display mb-4">Welcome Back!</h1>
|
|
|
|
<p className="text-xl opacity-80 mb-2">
|
|
<span className="font-bold text-yellow-300">{playerName}</span>
|
|
</p>
|
|
|
|
<div className="bg-white/10 rounded-2xl p-4 mb-6">
|
|
<p className="text-sm uppercase tracking-wide opacity-70 mb-1">Your Score</p>
|
|
<p className="text-4xl font-black">{score.toLocaleString()}</p>
|
|
</div>
|
|
|
|
<p className="text-lg opacity-70">
|
|
Waiting for the current question to finish...
|
|
</p>
|
|
|
|
<motion.div
|
|
className="flex justify-center gap-2 mt-6"
|
|
animate={{ opacity: [0.5, 1, 0.5] }}
|
|
transition={{ repeat: Infinity, duration: 1.5 }}
|
|
>
|
|
<div className="w-3 h-3 bg-white rounded-full" />
|
|
<div className="w-3 h-3 bg-white rounded-full" />
|
|
<div className="w-3 h-3 bg-white rounded-full" />
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
};
|