main

src/components/matches/match-list.tsx

@@ -117,6 +117,10 @@ export default function MatchList({
       );
     }
 
+    const sortedFlatMatches = [...flatMatches].sort(
+      (a, b) => Number(a.mstUtc) - Number(b.mstUtc),
+    );
+
     return (
       <StaggerContainer>
         <Grid
@@ -127,7 +131,7 @@ export default function MatchList({
           }}
           gap={4}
         >
-          {flatMatches.map((match) => (
+          {sortedFlatMatches.map((match) => (
             <StaggerItem key={match.id}>
               <MatchCard match={match} />
             </StaggerItem>
@@ -148,9 +152,23 @@ export default function MatchList({
     );
   }
 
+  // Sort leagues by their earliest match, and sort matches within each league
+  const sortedLeagues = [...leagues]
+    .map((league) => ({
+      ...league,
+      matches: [...league.matches].sort(
+        (a, b) => Number(a.mstUtc) - Number(b.mstUtc),
+      ),
+    }))
+    .sort((a, b) => {
+      const earliestA = Math.min(...a.matches.map((m) => Number(m.mstUtc)));
+      const earliestB = Math.min(...b.matches.map((m) => Number(m.mstUtc)));
+      return earliestA - earliestB;
+    });
+
   return (
     <StaggerContainer>
-      {leagues.map((league) => (
+      {sortedLeagues.map((league) => (
         <StaggerItem key={league.id}>
           <Box mb={6}>
             {/* League Header */}