diff --git a/src/pages/dashboard/giveaway/index.tsx b/src/pages/dashboard/giveaway/index.tsx index b8f85eeb..28b47d0c 100644 --- a/src/pages/dashboard/giveaway/index.tsx +++ b/src/pages/dashboard/giveaway/index.tsx @@ -5,11 +5,18 @@ import { motion } from "framer-motion"; import SlotCounter from "react-slot-counter"; import NavbarIcon from "../../../components/navbar/NavbarIcon"; import { useHistory } from "@docusaurus/router"; -import { Home, MessageCircle, Gift, Trophy, Crown, Star, Award, Clock, Users, TrendingUp, Medal } from "lucide-react"; +import { Home, MessageCircle, Gift, Trophy, Crown, Star, Award, Clock, Users, TrendingUp, Medal, ArrowLeft } from "lucide-react"; import "../dashboard.css"; // Giveaway-specific styles const giveawayStyles = ` +.dashboard-stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 24px; + margin-bottom: 40px; +} + .giveaway-stats-banner { display: flex; justify-content: space-between; @@ -370,6 +377,48 @@ const giveawayStyles = ` font-size: 2rem; } } + +/* Dashboard styles for consistency */ +.dashboard-stats-section { + margin-bottom: 60px; +} + +.section-title { + font-size: 1.8rem; + font-weight: 700; + margin-bottom: 30px; + text-align: center; + color: var(--ifm-color-content); +} + +.dashboard-stat-card { + background: var(--ifm-background-surface-color); + border: 1px solid var(--ifm-color-emphasis-200); + border-radius: 16px; + padding: 32px 24px; + text-align: center; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.dashboard-stat-value { + font-size: 2.5rem; + font-weight: 800; + margin-bottom: 10px; + color: var(--ifm-color-primary); + min-height: 60px; + display: flex; + align-items: center; + justify-content: center; +} + +@media (max-width: 996px) { + .dashboard-main-content { + padding: 80px 20px 40px; + } +} `; // Inject styles @@ -395,10 +444,38 @@ interface GiveawayEntry { const GiveawayPage: React.FC = () => { const history = useHistory(); - const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false); - const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false); + const [showDashboardMenu, setShowDashboardMenu] = useState(false); const [leaderboard, setLeaderboard] = useState([]); const [loading, setLoading] = useState(true); + const [activeTab, setActiveTab] = useState<"home" | "discuss" | "contributors" | "giveaway">("giveaway"); + + // Close dashboard menu when clicking outside + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + const target = event.target as Element; + // Close menu when clicking on overlay or anywhere outside the menu + if (showDashboardMenu && + (!target.closest('.dashboard-mobile-menu > div:last-child') && + !target.closest('.dashboard-menu-btn') || + target.closest('.dashboard-menu-overlay'))) { + setShowDashboardMenu(false); + } + }; + + if (showDashboardMenu) { + document.addEventListener('mousedown', handleClickOutside); + } + + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [showDashboardMenu]); + + // Ensure active tab is set correctly when page loads + useEffect(() => { + // We're on the giveaway page, so the active tab should be "giveaway" + setActiveTab("giveaway"); + }, []); useEffect(() => { // Simulate fetching leaderboard data @@ -463,13 +540,22 @@ const GiveawayPage: React.FC = () => { const handleTabChange = ( tab: "home" | "discuss" | "contributors" | "giveaway" ) => { - setIsMobileSidebarOpen(false); + setActiveTab(tab); + setShowDashboardMenu(false); + // When navigating from giveaway page to other tabs, we need to + // ensure we're using consistent paths with the dashboard page if (tab === "discuss") { + // Navigate to main dashboard page with discuss hash history.push("/dashboard#discuss"); } else if (tab === "contributors") { - history.push("/dashboard#contributors"); + // Navigate to main dashboard page with leaderboard hash + history.push("/dashboard#leaderboard"); } else if (tab === "home") { + // Navigate to main dashboard page history.push("/dashboard"); + } else if (tab === "giveaway") { + // Already on giveaway page, just scroll to top + window.scrollTo(0, 0); } }; @@ -508,85 +594,123 @@ const GiveawayPage: React.FC = () => { 🎁 RecodeHive Giveaway -
- {/* Mobile Menu Button */} +
+ {/* Dashboard Menu Button - Only visible on mobile */} + + {/* Dashboard Mobile Menu */} +
+ {/* Overlay - always present but opacity controlled by CSS */} +
setShowDashboardMenu(false)} + /> +
+
+

Dashboard Menu

+ +
+ + {/* Dashboard navigation items */} +
+
{ + handleTabChange("home"); + setShowDashboardMenu(false); + }} + > + Home +
+
{ + handleTabChange("discuss"); + setShowDashboardMenu(false); + }} + > + Discussions +
+
{ + handleTabChange("contributors"); + setShowDashboardMenu(false); + }} + > + LeaderBoard +
+
{ + handleTabChange("giveaway"); + setShowDashboardMenu(false); + }} + > + Giveaways +
+
+
+ +
+
-
    -
  • handleTabChange("home")}> - - - - Home -
  • -
  • handleTabChange("discuss")}> - - - - Discuss -
  • -
  • - - - - Giveaway -
  • -
  • + } + text="Home" + active={activeTab === "home"} + onClick={() => handleTabChange("home")} + /> + } + text="Discussions" + active={activeTab === "discuss"} + onClick={() => handleTabChange("discuss")} + /> + } + text="LeaderBoard" + active={activeTab === "contributors"} onClick={() => handleTabChange("contributors")} - > - - - - Contributors -
  • -
-
- + /> + } + text="Giveaways" + active={activeTab === "giveaway"} + onClick={() => handleTabChange("giveaway")} + />
- +
-
+
{
)} -
+
); diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index 9f90df32..77364849 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -104,7 +104,7 @@ const DashboardContent: React.FC = () => { // Set active tab based on URL hash if (location.hash === "#discuss") { setActiveTab("discuss"); - } else if (location.hash === "#contributors") { + } else if (location.hash === "#leaderboard") { setActiveTab("contributors"); } else if (location.hash === "#giveaway") { setActiveTab("giveaway"); @@ -285,7 +285,7 @@ const DashboardContent: React.FC = () => { } else if (tab === "giveaway") { history.push("/dashboard/giveaway"); } else if (tab === "contributors") { - history.push("#contributors"); + history.push("#leaderboard"); window.scrollTo(0, 0); } else { history.push("#");