34 lines
1.3 KiB
TypeScript
34 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { Trophy } from 'lucide-react';
|
|
|
|
interface WinMessageProps {
|
|
onPlayAgain: () => void;
|
|
moves: number;
|
|
}
|
|
|
|
const WinMessage: React.FC<WinMessageProps> = ({ onPlayAgain, moves }) => {
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/40 backdrop-blur-sm animate-in fade-in duration-300">
|
|
<div className="bg-white rounded-2xl shadow-2xl p-8 max-w-sm w-full text-center transform animate-in zoom-in-95 duration-300">
|
|
<div className="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4 text-yellow-500">
|
|
<Trophy size={32} />
|
|
</div>
|
|
|
|
<h2 className="text-2xl font-bold text-slate-800 mb-2">Level Complete!</h2>
|
|
<p className="text-slate-600 mb-6">
|
|
You solved the puzzle in <span className="font-bold text-indigo-600">{moves}</span> moves.
|
|
</p>
|
|
|
|
<button
|
|
onClick={onPlayAgain}
|
|
className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-xl transition-all hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
|
>
|
|
Play Again
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WinMessage;
|