leetcode leaderboard integration, routing, pages, and navbar. Added to projects page.

src/Components/Navbar/AdminNavbar.js

@@ -99,6 +99,15 @@ export default function UserNavBar(props) {
         </svg>
       ),
     },
+    {
+      title: 'LeetCode Leaderboard',
+      route: '/leetcode',
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M8.242 5.992h12m-12 6.003H20.24m-12 5.999h12M4.117 7.495v-3.75H2.99m1.125 3.75H2.99m1.125 0H5.24m-1.92 2.577a1.125 1.125 0 1 1 1.591 1.59l-1.83 1.83h2.16M2.99 15.745h1.125a1.125 1.125 0 0 1 0 2.25H3.74m0-.002h.375a1.125 1.125 0 0 1 0 2.25H2.99" />
+        </svg>
+      ),
+    },
   ];
 
   const renderRoutesForNavbar = (navbarLinks) => {

src/Pages/LeetCode/LeetCode.js

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { membershipState } from '../../Enums';
+
+export default function LeetCode({ user }) {
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+
+  const handleLoad = () => {
+    setIsLoading(false);
+    setHasError(false);
+  };
+
+  const handleError = () => {
+    setIsLoading(false);
+    setHasError(true);
+  };
+
+  // Determine if user is admin
+  const isAdmin = user?.accessLevel >= membershipState.OFFICER;
+  const iframeSrc = `http://192.168.69.123:5173?isAdmin=${isAdmin}`;
+
+  return (
+    <div className="fixed inset-0 w-full h-full">
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-white">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+        </div>
+      )}
+      {hasError && (
+        <div className="absolute inset-0 flex flex-col items-center justify-center bg-white">
+          <div className="text-red-500 mb-4">Failed to load LeetCode page</div>
+          <button 
+            onClick={() => window.location.reload()}
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+          >
+            Retry
+          </button>
+        </div>
+      )}
+      <iframe 
+        src={iframeSrc}
+        className="w-full h-full border-0"
+        style={{ position: 'absolute', top: 0, left: 0, bottom: 0, right: 0 }}
+        title="LeetCode Leaderboard"
+        onLoad={handleLoad}
+        onError={handleError}
+        frameBorder="0"
+      />
+    </div>
+  );
+} 

src/Pages/Projects/Projects.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import ProjectCard from './Components/ProjectCard';
-
 const projects = [
   {
     'link': 'https://github.com/SCE-Development/Clark',
@@ -37,6 +36,13 @@ const projects = [
     'information': 'FastAPI',
     'caption': 'A url shortening service created by SCE'
   },
+  {
+    'link': 'https://github.com/SCE-Development/LedMatrix',
+    'image': 'https://github.com/user-attachments/assets/03c1646d-5d64-448f-9c65-cffc9883b58e',
+    'name': 'LeetCode Leaderboard',
+    'information': 'Full Stack',
+    'caption': 'A leaderboard for LeetCode problems. View live leaderboard [here](http://192.168.69.123:5173)'
+  }
 ];
 
 export default function ProjectsPage() {

src/Routing.js

@@ -11,6 +11,7 @@ import Profile from './Pages/Profile/MemberView/Profile';
 import LedSign from './Pages/LedSign/LedSign';
 import SpeakerPage from './Pages/Speaker/Speaker';
 import EditUserInfo from './Pages/UserManager/EditUserInfo';
+import LeetCode from './Pages/LeetCode/LeetCode.js';
 
 import Home from './Pages/Home/Home.js';
 import NotFoundPage from './Pages/NotFoundPage/NotFoundPage';
@@ -138,6 +139,13 @@ export default function Routing({ appProps }) {
       allowedIf: userIsOfficerOrAdmin,
       redirect: '/',
       inAdminNavbar: true
+    },
+    {
+      Component: LeetCode,
+      path: '/leetcode',
+      allowedIf: userIsOfficerOrAdmin,
+      redirect: '/',
+      inAdminNavbar: true
     }
   ];
   const signedOutRoutes = [