Satyam
91 lines
5.0 KiB
React
91 lines
5.0 KiB
React
import React from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { Star, Trophy, Zap } from 'lucide-react';
|
|
import { useGamification } from '../../../context/GamificationContext';
|
|
|
|
const LevelUpModal = () => {
|
|
const { levelUpData } = useGamification();
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{levelUpData && (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center pointer-events-none">
|
|
{/* Backdrop glow */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm pointer-events-auto"
|
|
/>
|
|
|
|
<motion.div
|
|
initial={{ scale: 0.5, opacity: 0, y: 50 }}
|
|
animate={{ scale: 1, opacity: 1, y: 0 }}
|
|
exit={{ scale: 0.8, opacity: 0, y: -50 }}
|
|
transition={{ type: "spring", stiffness: 300, damping: 20 }}
|
|
className="relative z-10 w-full max-w-sm"
|
|
>
|
|
{/* Celebration Ring */}
|
|
<motion.div
|
|
className="absolute inset-x-0 -top-12 h-40 bg-gradient-to-b from-yellow-400/20 to-transparent blur-2xl rounded-t-full"
|
|
animate={{ opacity: [0.5, 1, 0.5] }}
|
|
transition={{ repeat: Infinity, duration: 2 }}
|
|
/>
|
|
|
|
<div className="bg-slate-900 border-2 border-yellow-500/50 rounded-3xl p-8 shadow-[0_0_50px_rgba(234,179,8,0.3)] relative overflow-hidden pointer-events-auto text-center">
|
|
|
|
{/* Rotating background ray effect */}
|
|
<motion.div
|
|
className="absolute inset-0 z-0 opacity-20"
|
|
animate={{ rotate: 360 }}
|
|
transition={{ repeat: Infinity, duration: 20, ease: "linear" }}
|
|
style={{
|
|
background: 'repeating-conic-gradient(from 0deg, transparent 0deg 15deg, #eab308 15deg 30deg)'
|
|
}}
|
|
/>
|
|
|
|
<div className="relative z-10 flex flex-col items-center">
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1, rotate: [0, -10, 10, -10, 0] }}
|
|
transition={{ delay: 0.2, type: "spring", stiffness: 200, damping: 10 }}
|
|
className="w-24 h-24 bg-gradient-to-br from-yellow-300 to-yellow-600 rounded-full flex items-center justify-center shadow-[0_0_30px_rgba(234,179,8,0.8)] mb-6 border-4 border-slate-900"
|
|
>
|
|
<Star className="w-12 h-12 text-slate-900 fill-slate-900" />
|
|
</motion.div>
|
|
|
|
<h2 className="text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-300 mb-2 uppercase tracking-wide">
|
|
Level Up!
|
|
</h2>
|
|
|
|
<div className="text-xl font-bold text-yellow-400 mb-6 flex justify-center items-center gap-2">
|
|
<Zap className="w-5 h-5 fill-current" />
|
|
Level {levelUpData.newLevel} Reached
|
|
<Zap className="w-5 h-5 fill-current" />
|
|
</div>
|
|
|
|
{levelUpData.titleChanged && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.5 }}
|
|
className="bg-slate-800/80 border border-slate-700 rounded-xl p-4 w-full shadow-inner"
|
|
>
|
|
<div className="text-xs text-slate-400 uppercase tracking-widest font-bold mb-1">New Rank Unlocked</div>
|
|
<div className="flex items-center justify-center gap-2 text-2xl font-black text-white">
|
|
<Trophy className="w-6 h-6 text-yellow-500" />
|
|
{levelUpData.newTitle}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
};
|
|
|
|
export default LevelUpModal;
|