pop up added

Author: sparsh44

pages/graveyard.tsx

@@ -5,6 +5,7 @@ import { TopThree } from "../components/leaderboard/TopThree";
 import { LeaderboardTable } from "../components/leaderboard/LeaderboardTable";
 import { Item } from "../typings/types";
 import tombstone from "../public/assets/animations/tombstone.json";
+import { motion, AnimatePresence } from "framer-motion";
 
 // Dynamically import Lottie to prevent SSR issues
 const Lottie = dynamic(() => import("lottie-react"), { ssr: false });
@@ -13,9 +14,11 @@ function Graveyard() {
     const [leaderboard, setLeaderboard] = useState<Item[]>([]);
     const [loading, setLoading] = useState<boolean>(true);
     const [isClient, setIsClient] = useState(false);
+    const [showNotification, setShowNotification] = useState<boolean>(false);
 
     useEffect(() => {
-        setIsClient(true); // Ensures animations only run on the client
+        setIsClient(true);
+
         const fetchGraveyardData = async () => {
             try {
                 const baseURL = process.env.NEXT_PUBLIC_API_BASE_URL;
@@ -31,11 +34,41 @@ function Graveyard() {
                 setLoading(false);
             }
         };
+
+        // Initial fetch
         fetchGraveyardData();
+
+        // Show notification on page load
+        setShowNotification(true);
+        setTimeout(() => setShowNotification(false), 4000);
+
+        // Refresh leaderboard every 5 minutes and show notification
+        const interval = setInterval(() => {
+            fetchGraveyardData();
+            setShowNotification(true);
+            setTimeout(() => setShowNotification(false), 4000);
+        }, 5 * 60 * 1000); // 5 minutes
+
+        return () => clearInterval(interval);
     }, []);
 
     return (
         <PageLayout title="PWOC | Graveyard" description="A place to bury programming mistakes">
+            {/* 🔔 Notification Popup */}
+            <AnimatePresence>
+                {showNotification && (
+                    <motion.div
+                        initial={{ opacity: 0, x: 50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50 }}
+                        transition={{ duration: 0.5 }}
+                        className="fixed top-6 right-6 bg-white/20 text-white py-3 px-5 rounded-lg shadow-lg backdrop-blur-md border border-gray-400 z-50"
+                    >
+                        <p className="text-sm font-medium">🔄 Leaderboard refreshes every 5 minutes.</p>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
             <div className="flex flex-col items-center my-[30px] w-full">
                 <div className="font-bold text-[40px] text-[#274495]">Graveyard</div>
                 <div className="text-[#274495] font-semibold">
@@ -59,4 +92,4 @@ function Graveyard() {
     );
 }
 
-export default Graveyard;
+export default Graveyard;

pages/leaderboard.tsx

@@ -3,9 +3,10 @@ import { useEffect, useState } from "react";
 import dynamic from "next/dynamic";
 import { Item } from "../typings/types";
 import { LeaderboardTable } from "../components/leaderboard/LeaderboardTable";
-import {TopThree}  from "../components/leaderboard/TopThree";
+import { TopThree } from "../components/leaderboard/TopThree";
 import PageLayout from "../components/layout/PageLayout";
 import snowman from "../public/assets/animations/snowman.json";
+import { motion, AnimatePresence } from "framer-motion";
 
 // Dynamically import Lottie to prevent SSR issues
 const Lottie = dynamic(() => import("lottie-react"), { ssr: false });
@@ -14,9 +15,11 @@ const Leaderboard: NextPage = () => {
     const [leaderboard, setLeaderboard] = useState<Item[]>([]);
     const [loading, setLoading] = useState<boolean>(true);
     const [isClient, setIsClient] = useState(false);
+    const [showNotification, setShowNotification] = useState<boolean>(false);
 
     useEffect(() => {
-        setIsClient(true); // Ensure animations only run on the client
+        setIsClient(true);
+
         const fetchLeaderboard = async () => {
             try {
                 const baseURL = process.env.NEXT_PUBLIC_API_BASE_URL;
@@ -32,11 +35,42 @@ const Leaderboard: NextPage = () => {
                 setLoading(false);
             }
         };
+
+        // Initial fetch
         fetchLeaderboard();
+
+        // Show notification on page load
+        setShowNotification(true);
+        setTimeout(() => setShowNotification(false), 4000);
+
+        // Refresh leaderboard every 5 minutes and show notification
+        const interval = setInterval(() => {
+            fetchLeaderboard();
+            setShowNotification(true);
+            setTimeout(() => setShowNotification(false), 4000);
+        }, 5 * 60 * 1000); // 5 minutes
+
+        return () => clearInterval(interval);
     }, []);
 
     return (
         <PageLayout title="PWOC | Leaderboard" description="Leaderboard of PWoC">
+            {/* 🔔 Notification Popup */}
+            <AnimatePresence>
+                {showNotification && (
+                    <motion.div
+                        initial={{ opacity: 0, x: 50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50 }}
+                        transition={{ duration: 0.5 }}
+                        className="fixed top-6 right-6 bg-white/20 text-white py-3 px-5 rounded-lg shadow-lg backdrop-blur-md border border-gray-400 z-50"
+                    >
+                        <p className="text-sm font-medium">🔄 Leaderboard refreshes every 5 minutes.</p>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
+            {/* Leaderboard Content */}
             <div className="flex items-center flex-col">
                 {leaderboard.length > 2 ? (
                     <>
@@ -56,4 +90,4 @@ const Leaderboard: NextPage = () => {
     );
 };
 
-export default Leaderboard;
+export default Leaderboard;