Show the recently updated item on top

src/components/Activity/ActivityPage.tsx

@@ -101,7 +101,14 @@ export function ActivityPage() {
               Continue Following
             </h2>
             <div class="flex flex-col gap-3">
-              {learningRoadmaps.reverse().map((roadmap) => (
+              {learningRoadmaps
+                .sort((a, b) => {
+                  const updatedAtA = new Date(a.updatedAt);
+                  const updatedAtB = new Date(b.updatedAt);
+
+                  return updatedAtB.getTime() - updatedAtA.getTime();
+                })
+                .map((roadmap) => (
                   <ResourceProgress
                     doneCount={roadmap.done || 0}
                     learningCount={roadmap.learning || 0}
@@ -120,7 +127,14 @@ export function ActivityPage() {
                   />
                 ))}
 
-              {learningBestPractices.reverse().map((bestPractice) => (
+              {learningBestPractices
+                .sort((a, b) => {
+                  const updatedAtA = new Date(a.updatedAt);
+                  const updatedAtB = new Date(b.updatedAt);
+
+                  return updatedAtB.getTime() - updatedAtA.getTime();
+                })
+                .map((bestPractice) => (
                   <ResourceProgress
                     doneCount={bestPractice.done || 0}
                     totalCount={bestPractice.total || 0}