Add Giveaway Page with Countdown Timer, Confetti, and Leaderboard

Samridha0305 · Samridha0305 · commit 5847c3fe05d3 · 2025-07-28T21:41:39.000+05:30
diff --git a/package.json b/package.json
@@ -15,11 +15,12 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "3.7.0",
+    "@docusaurus/core": "^3.7.0",
     "@docusaurus/plugin-content-docs": "3.7.0",
     "@docusaurus/plugin-google-analytics": "^3.8.1",
     "@docusaurus/plugin-ideal-image": "3.7.0",
     "@docusaurus/preset-classic": "3.7.0",
+    "@docusaurus/theme-classic": "^3.8.1",
     "@docusaurus/theme-mermaid": "3.7.0",
     "@docusaurus/theme-search-algolia": "3.7.0",
     "@floating-ui/react": "^0.27.8",
@@ -31,6 +32,7 @@
     "@tsparticles/react": "^3.0.0",
     "@tsparticles/slim": "^3.8.1",
     "@vercel/analytics": "^1.5.0",
+    "canvas-confetti": "^1.9.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dotenv": "^16.5.0",
@@ -41,7 +43,7 @@
     "framer-motion": "^12.7.5",
     "lucide-react": "^0.503.0",
     "prism-react-renderer": "^2.3.0",
-    "react": "^18.0.0",
+    "react": "^18.3.1",
     "react-dom": "^18.0.0",
     "react-icons": "^5.5.0",
     "react-slot-counter": "^3.3.1",
@@ -57,6 +59,7 @@
     "@docusaurus/tsconfig": "3.7.0",
     "@docusaurus/types": "3.7.0",
     "@tailwindcss/postcss": "^4.1.4",
+    "@types/canvas-confetti": "^1.9.0",
     "autoprefixer": "^10.4.21",
     "postcss": "^8.5.3",
     "tailwindcss": "^4.1.4",
diff --git a/src/pages/dashboard/giveaway/index.tsx b/src/pages/dashboard/giveaway/index.tsx
@@ -1,17 +1,19 @@
 import React, { useEffect, useState } from 'react';
 import Layout from '@theme/Layout';
 import Head from '@docusaurus/Head';
+import type confettiType from 'canvas-confetti';
 
-const GiveawayPage = () => {
+const GiveawayPage: React.FC = () => {
   const [timeLeft, setTimeLeft] = useState({
     days: '--',
     hours: '--',
     minutes: '--',
     seconds: '--',
   });
 
-  const countdownTarget = new Date('2025-08-15T23:59:59').getTime(); // Customize this date
+  const countdownTarget = new Date('2025-08-15T23:59:59').getTime(); // Update the deadline if needed
 
+  // Countdown Timer Effect
   useEffect(() => {
     const interval = setInterval(() => {
       const now = new Date().getTime();
@@ -36,14 +38,27 @@ const GiveawayPage = () => {
       });
     }, 1000);
 
-    // Confetti burst
-    import('canvas-confetti').then(confetti => {
-      confetti.default({ particleCount: 150, spread: 70, origin: { y: 0.6 } });
-    });
-
     return () => clearInterval(interval);
   }, []);
 
+  // Confetti Effect
+  useEffect(() => {
+    const runConfetti = async () => {
+      const module = await import('canvas-confetti');
+      const confetti = module.default as typeof confettiType;
+
+      confetti({
+        particleCount: 150,
+        spread: 70,
+        origin: { y: 0.6 },
+      });
+    };
+
+    const timer = setTimeout(runConfetti, 1000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
   return (
     <Layout>
       <Head>
@@ -56,9 +71,9 @@ const GiveawayPage = () => {
           <p className="text-lg mb-8">Participate now and win exclusive swag, resources, and more!</p>
 
           <div className="flex justify-center gap-4 text-center mb-12">
-            {['days', 'hours', 'minutes', 'seconds'].map(unit => (
+            {['days', 'hours', 'minutes', 'seconds'].map((unit) => (
               <div key={unit} className="bg-white/10 px-6 py-4 rounded-xl shadow-md">
-                <div className="text-3xl font-bold">{timeLeft[unit]}</div>
+                <div className="text-3xl font-bold">{timeLeft[unit as keyof typeof timeLeft]}</div>
                 <div className="text-sm uppercase tracking-widest">{unit}</div>
               </div>
             ))}
@@ -75,7 +90,6 @@ const GiveawayPage = () => {
                 </tr>
               </thead>
               <tbody>
-                {/* Replace this static data with dynamic data if needed */}
                 <tr className="border-b border-white/10">
                   <td>1</td>
                   <td>OpenSourcePro</td>
@@ -95,7 +109,7 @@ const GiveawayPage = () => {
             </table>
           </div>
 
-          <p className="text-sm text-white/60 italic">
+          <p className="text-sm text-white text-opacity-60 italic">
             Winners will be announced after the countdown ends. Stay active on the dashboard to climb up the leaderboard!
           </p>
         </div>
diff --git a/tsconfig.json b/tsconfig.json
@@ -4,6 +4,9 @@
   "compilerOptions": {
     "jsx": "react",
     "baseUrl": ".",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true
     
   },
   "exclude": [".docusaurus", "build"]
