add no match block in the leaderboard page

client/src/components/LeaderboardFilters/LeaderboardFilters.jsx

@@ -45,7 +45,7 @@ const LeaderboardFilters = ({ allSections }) => {
       <Box
         sx={{
           width: {
-            xs: "90%",
+            xs: "100%",
             md: "60%",
           },
         }}

client/src/pages/LeaderboardPage/LeaderboardPage.jsx

@@ -11,6 +11,7 @@ import {
   Typography,
 } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
+import SearchOffIcon from "@mui/icons-material/SearchOff";
 import Logo from "../../components/Logo/Logo";
 import PageTitle from "../../components/PageTitle/PageTitle";
 import PageHeader from "../../components/PageHeader/PageHeader";
@@ -25,8 +26,14 @@ import {
 
 const LeaderboardPageContent = () => {
   const [loading, setLoading] = useState(true);
-  const { setLeaderboards, filterLeaderboards, sections, allSections } =
-    useLeaderboard();
+  const {
+    setLeaderboards,
+    filterLeaderboards,
+    sections,
+    allSections,
+    searchQuery,
+    arenaOnly,
+  } = useLeaderboard();
 
   useEffect(() => {
     fetch(API_URLS.leaderboards)
@@ -44,6 +51,15 @@ const LeaderboardPageContent = () => {
       });
   }, [setLeaderboards]);
 
+  // Check if any leaderboards are found after filtering
+  const totalFilteredLeaderboards = sections.reduce(
+    (total, { data }) => total + filterLeaderboards(data).length,
+    0
+  );
+
+  const hasLeaderboards = totalFilteredLeaderboards > 0;
+  const isFiltering = searchQuery || arenaOnly;
+
   return (
     <Box
       sx={{
@@ -93,14 +109,63 @@ const LeaderboardPageContent = () => {
         >
           <LeaderboardFilters allSections={allSections} />
 
-          {sections.map(({ id, title, data }) => (
-            <Box key={id} id={id}>
-              <LeaderboardSection
-                title={title}
-                leaderboards={filterLeaderboards(data)}
+          {!hasLeaderboards && isFiltering && (
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                gap: 2,
+                mt: 8,
+                py: 7,
+              }}
+            >
+              <SearchOffIcon
+                sx={{
+                  fontSize: 64,
+                  color: "text.secondary",
+                  opacity: 0.5,
+                }}
               />
+              <Typography variant="h5" color="text.secondary" align="center">
+                {searchQuery ? (
+                  <>
+                    Oops! No leaderboard matches{" "}
+                    <Box
+                      component="span"
+                      sx={{
+                        bgcolor: "primary.main",
+                        color: "primary.contrastText",
+                        px: 1,
+                        borderRadius: 1,
+                      }}
+                    >
+                      {searchQuery}
+                    </Box>
+                  </>
+                ) : (
+                  "Oops! No leaderboard matches your criteria"
+                )}
+              </Typography>
+              <Typography variant="body1" color="text.secondary" align="center">
+                Try adjusting your search filters
+              </Typography>
             </Box>
-          ))}
+          )}
+
+          {(hasLeaderboards || !isFiltering) &&
+            sections.map(({ id, title, data }) => {
+              const filteredLeaderboards = filterLeaderboards(data);
+              if (filteredLeaderboards.length === 0) return null;
+              return (
+                <Box key={id} id={id}>
+                  <LeaderboardSection
+                    title={title}
+                    leaderboards={filteredLeaderboards}
+                  />
+                </Box>
+              );
+            })}
         </Box>
       )}
     </Box>