Refactor color mode handling to use useSafeColorMode; add badge display functionality in leaderboard component

Author: yashksaini-coder

src/components/dashboard/LeaderBoard/PRListModal.tsx

@@ -2,7 +2,7 @@
 import React, { useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { FaTimes, FaExternalLinkAlt, FaGithub } from "react-icons/fa";
-import { useColorMode } from "@docusaurus/theme-common";
+import { useSafeColorMode } from "@site/src/utils/useSafeColorMode";
 import { useCommunityStatsContext } from "../../../lib/statsProvider";
 
 interface PRDetails {
@@ -34,8 +34,7 @@ export default function PRListModal({
   isOpen,
   onClose,
 }: PRListModalProps): JSX.Element | null {
-  const { colorMode } = useColorMode();
-  const isDark = colorMode === "dark";
+  const { isDark } = useSafeColorMode();
 
   // Get filtered PRs from context
   const { getFilteredPRsForContributor, currentTimeFilter } =

src/components/dashboard/LeaderBoard/leaderboard.css

@@ -546,7 +546,7 @@
 
 .contributors-header {
   display: grid;
-  grid-template-columns: 0.5fr 0.5fr 2fr 1fr 1fr;
+  grid-template-columns: 0.5fr 0.5fr 2fr 1fr 1fr 1.5fr;
   padding: 16px 24px;
   font-weight: bold;
   font-size: 14px;
@@ -569,7 +569,7 @@
 
 .contributor-row {
   display: grid;
-  grid-template-columns: 0.5fr 0.5fr 2fr 1fr 1fr;
+  grid-template-columns: 0.5fr 0.5fr 2fr 1fr 1fr 1.5fr;
   align-items: center;
   padding: 16px 24px;
   transition: background-color 0.2s ease;
@@ -615,6 +615,76 @@
   padding: 8px;
 }
 
+/* Badge display styles */
+.contributor-badges {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.contributor-badge-icon {
+  width: 44px;
+  height: 44px;
+  object-fit: contain;
+  border-radius: 8px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.1);
+  padding: 2px;
+}
+
+.contributor-badge-icon:hover {
+  transform: scale(1.15);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  z-index: 10;
+  position: relative;
+}
+
+.username-with-badges {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+/* Badges column styling */
+.contributor-cell.badges-cell {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 8px;
+}
+
+/* Badge display in top performer cards */
+.top-performer-card .contributor-badges {
+  margin-top: 8px;
+  justify-content: center;
+}
+
+.top-performer-card .contributor-badge-icon {
+  width: 36px;
+  height: 36px;
+}
+
+/* Badge display in podium cards */
+.podium-card .details {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.podium-card .contributor-badges {
+  margin-top: 4px;
+  justify-content: center;
+}
+
+.podium-card .contributor-badge-icon {
+  width: 32px;
+  height: 32px;
+}
+
 /* Position the badge inside the cell */
 .rank-badge {
   position: absolute;

src/components/dashboard/LeaderBoard/leaderboard.tsx

@@ -3,7 +3,7 @@ import React, { JSX, useState } from "react";
 import { motion } from "framer-motion";
 import { FaStar, FaCode, FaUsers, FaGithub, FaSearch } from "react-icons/fa";
 import { ChevronRight, ChevronLeft } from "lucide-react";
-import { useColorMode } from "@docusaurus/theme-common";
+import { useSafeColorMode } from "@site/src/utils/useSafeColorMode";
 import { useCommunityStatsContext } from "@site/src/lib/statsProvider";
 import PRListModal from "./PRListModal";
 import { mockContributors } from "./mockData";
@@ -29,6 +29,7 @@ interface Contributor {
   points: number;
   prs: number;
   prDetails?: PRDetails[];
+  badges?: string[]; // Array of badge image paths
 }
 
 interface Stats {
@@ -37,6 +38,69 @@ interface Stats {
   flooredTotalPoints: number;
 }
 
+// Badge configuration - maps badge numbers to achievement criteria
+const BADGE_CONFIG = [
+  { image: "/badges/1.png", name: "First Contribution", criteria: (prs: number) => prs >= 1 },
+  { image: "/badges/2.png", name: "Bronze Contributor", criteria: (prs: number) => prs >= 5 },
+  { image: "/badges/3.png", name: "Silver Contributor", criteria: (prs: number) => prs >= 10 },
+  { image: "/badges/4.png", name: "Gold Contributor", criteria: (prs: number) => prs >= 25 },
+  { image: "/badges/5.png", name: "Platinum Contributor", criteria: (prs: number) => prs >= 50 },
+  { image: "/badges/6.png", name: "Diamond Contributor", criteria: (prs: number) => prs >= 100 },
+  { image: "/badges/7.png", name: "Points Master", criteria: (_: number, points: number) => points >= 500 },
+  { image: "/badges/8.png", name: "Elite Contributor", criteria: (prs: number) => prs >= 200 },
+  { image: "/badges/9.png", name: "Legendary Contributor", criteria: (prs: number) => prs >= 500 },
+  { image: "/badges/10.png", name: "Hall of Fame", criteria: (prs: number, points: number) => prs >= 1000 || points >= 5000 },
+];
+
+/**
+ * Determines which badges a contributor should have based on their stats
+ */
+function getContributorBadges(contributor: Contributor, rank: number): string[] {
+  const badges: string[] = [];
+
+  // Special rank-based badges
+  if (rank === 1) {
+    badges.push("/badges/10.png"); // Hall of Fame for #1
+  } else if (rank === 2) {
+    badges.push("/badges/9.png"); // Legendary for #2
+  } else if (rank === 3) {
+    badges.push("/badges/8.png"); // Elite for #3
+  }
+
+  // Achievement-based badges
+  BADGE_CONFIG.forEach((badge) => {
+    if (badge.criteria(contributor.prs, contributor.points)) {
+      // Avoid duplicates
+      if (!badges.includes(badge.image)) {
+        badges.push(badge.image);
+      }
+    }
+  });
+
+  return badges;
+}
+
+/**
+ * Badge display component
+ */
+function ContributorBadges({ badges }: { badges: string[] }) {
+  if (!badges || badges.length === 0) return null;
+
+  return (
+    <div className="contributor-badges">
+      {badges.map((badge, index) => (
+        <img
+          key={index}
+          src={badge}
+          alt={`Badge ${index + 1}`}
+          className="contributor-badge-icon"
+          title={BADGE_CONFIG.find(b => b.image === badge)?.name || "Achievement Badge"}
+        />
+      ))}
+    </div>
+  );
+}
+
 function Badge({
   count,
   label,
@@ -93,9 +157,9 @@ function TopPerformerCard({
   rank: number;
   onPRClick: (contributor: Contributor) => void;
 }) {
-  const { colorMode } = useColorMode();
-  const isDark = colorMode === "dark";
+  const { isDark } = useSafeColorMode();
   const rankClass = rank === 1 ? "top-1" : rank === 2 ? "top-2" : "top-3";
+  const badges = getContributorBadges(contributor, rank);
 
   return (
     <div className={`top-performer-card ${isDark ? "dark" : "light"}`}>
@@ -116,6 +180,7 @@ function TopPerformerCard({
         >
           {contributor.username}
         </a>
+        <ContributorBadges badges={badges} />
         <div className="badges-container">
           <Badge
             count={contributor.prs}
@@ -146,8 +211,7 @@ export default function LeaderBoard(): JSX.Element {
     setTimeFilter,
   } = useCommunityStatsContext();
 
-  const { colorMode } = useColorMode();
-  const isDark = colorMode === "dark";
+  const { isDark } = useSafeColorMode();
 
   const [searchQuery, setSearchQuery] = useState("");
   const [currentPage, setCurrentPage] = useState(1);
@@ -377,6 +441,7 @@ export default function LeaderBoard(): JSX.Element {
                     />
                     <div className="details">
                       <p className="username">{filteredContributors[1].username}</p>
+                      <ContributorBadges badges={getContributorBadges(filteredContributors[1], 2)} />
                       <div className="stats">
                         <button
                           className="prs"
@@ -402,6 +467,7 @@ export default function LeaderBoard(): JSX.Element {
                     />
                     <div className="details">
                       <p className="username">{filteredContributors[0].username}</p>
+                      <ContributorBadges badges={getContributorBadges(filteredContributors[0], 1)} />
                       <div className="stats">
                         <button
                           className="prs"
@@ -427,6 +493,7 @@ export default function LeaderBoard(): JSX.Element {
                     />
                     <div className="details">
                       <p className="username">{filteredContributors[2].username}</p>
+                      <ContributorBadges badges={getContributorBadges(filteredContributors[2], 3)} />
                       <div className="stats">
                         <button
                           className="prs"
@@ -574,6 +641,7 @@ export default function LeaderBoard(): JSX.Element {
               <div className="contributor-cell username-cell">User</div>
               <div className="contributor-cell prs-cell">PRs</div>
               <div className="contributor-cell points-cell">Points</div>
+              <div className="contributor-cell badges-cell">Badges</div>
             </div>
             {currentItems.map((contributor, index) => (
               <motion.div
@@ -629,6 +697,11 @@ export default function LeaderBoard(): JSX.Element {
                     color={{ background: "#ede9fe", color: "#7c3aed" }}
                   />
                 </div>
+                <div className="contributor-cell badges-cell">
+                  <ContributorBadges
+                    badges={getContributorBadges(contributor, indexOfFirst + index + 1)}
+                  />
+                </div>
               </motion.div>
             ))}
 

src/components/faqs/faqs.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { FiChevronDown } from "react-icons/fi";
 import { motion } from "framer-motion";
-import { useColorMode } from "@docusaurus/theme-common"; // Docusaurus theme detection
+import { useSafeColorMode } from "../../utils/useSafeColorMode";
 
 const faqData = [
   {
@@ -44,8 +44,7 @@ const faqData = [
 
 const FAQs: React.FC = () => {
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
-  const { colorMode } = useColorMode();
-  const isDark = colorMode === "dark";
+  const { colorMode, isDark } = useSafeColorMode();
 
   const toggleAccordion = (index: number) => {
     setActiveIndex(activeIndex === index ? null : index);

src/components/ourProjects.tsx

@@ -4,7 +4,7 @@ import { ChevronRight } from "lucide-react";
 import { useState } from "react";
 import { motion } from "framer-motion";
 import React from "react";
-import { useColorMode } from "@docusaurus/theme-common";
+import { useSafeColorMode } from "../utils/useSafeColorMode";
 // Mobile-specific overrides for very small screens (<768px and <320px)
 import "./ourProjects.mobile.css";
 // Import projects data and types
@@ -51,8 +51,7 @@ export interface OurProjectsProps {
 const OurProjects: React.FC<OurProjectsProps> = ({
   OurProjectsData: legacyData,
 }) => {
-  const { colorMode } = useColorMode(); // light or dark
-  const isDark = colorMode === "dark";
+  const { colorMode, isDark } = useSafeColorMode();
 
   // Use JSON data by default, fallback to legacy props for backward compatibility
   // Convert legacy data to new format if needed

src/components/testimonials/TestimonialCard.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { motion } from "framer-motion";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
-import { useColorMode } from "@docusaurus/theme-common";
+import { useSafeColorMode } from "../../utils/useSafeColorMode";
 
 interface TestimonialCardProps {
   name: string;
@@ -20,8 +20,7 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
   avatar,
   link,
 }) => {
-  const { colorMode } = useColorMode();
-  const isDark = colorMode === "dark";
+  const { colorMode, isDark } = useSafeColorMode();
 
   // Function to format the link display
   const formatLinkDisplay = (url: string) => {

src/components/topmate/TopMateCard.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { motion } from "framer-motion";
 import { ArrowUpRight, Clock } from "lucide-react";
-import { useColorMode } from "@docusaurus/theme-common";
+import { useSafeColorMode } from "../../utils/useSafeColorMode";
 
 interface TopMateCardProps {
   title: string;
@@ -20,8 +20,7 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
   username,
   setShowTopmate,
 }) => {
-  const { colorMode } = useColorMode();
-  const isDark = colorMode === "dark";
+  const { colorMode, isDark } = useSafeColorMode();
 
   return (
     <motion.div

src/components/topmate/TopMateSection.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import TopMateCard from "./TopMateCard";
-import { useColorMode } from "@docusaurus/theme-common";
+import { useSafeColorMode } from "../../utils/useSafeColorMode";
 
 const TopMateSection = ({ setShowTopmate }) => {
-  const { colorMode } = useColorMode(); // Get current theme: 'light' or 'dark'
+  const { colorMode } = useSafeColorMode(); // Get current theme: 'light' or 'dark'
 
   const profileData = {
     title: "1:1 Mentorship Call",

src/theme/ColorModeToggle/index.tsx

@@ -1,8 +1,22 @@
 import React from "react";
-import { useColorMode } from "@docusaurus/theme-common";
+import { useSafeColorMode } from "@site/src/utils/useSafeColorMode";
+import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 
 export default function ColorModeToggle(): JSX.Element {
-  const { colorMode, setColorMode } = useColorMode();
+  const { colorMode } = useSafeColorMode();
+  
+  // Safe setColorMode that works with DOM
+  const setColorMode = (mode: "light" | "dark") => {
+    if (!ExecutionEnvironment.canUseDOM) return;
+    document.documentElement.setAttribute("data-theme", mode);
+    // Also trigger Docusaurus's internal theme change if available
+    try {
+      const { setColorMode: docusaurusSetColorMode } = require("@docusaurus/theme-common");
+      docusaurusSetColorMode(mode);
+    } catch (e) {
+      // Fallback: just set the DOM attribute
+    }
+  };
 
   const toggleColorMode = () => {
     const newMode = colorMode === "dark" ? "light" : "dark";