From 5bdfe48cad1cca1aec169c70603bc15307d4d579 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 29 Mar 2024 18:02:56 +0000
Subject: [PATCH] Restructure roadmaps

---
 src/components/Roadmaps/RoadmapsPage.tsx | 77 +++++++++++-------------
 1 file changed, 36 insertions(+), 41 deletions(-)

diff --git a/src/components/Roadmaps/RoadmapsPage.tsx b/src/components/Roadmaps/RoadmapsPage.tsx
index c172b1a38..77513251f 100644
--- a/src/components/Roadmaps/RoadmapsPage.tsx
+++ b/src/components/Roadmaps/RoadmapsPage.tsx
@@ -37,21 +37,19 @@ const groups: GroupType[] = [
         title: 'Frontend Beginner',
         link: '/frontend?r=frontend-beginner',
         type: 'role',
+        otherGroups: ['Web Development'],
       },
       {
         title: 'Backend Beginner',
         link: '/backend?r=backend-beginner',
         type: 'role',
+        otherGroups: ['Web Development'],
       },
       {
         title: 'DevOps Beginner',
         link: '/devops?r=devops-beginner',
         type: 'role',
-      },
-      {
-        title: 'Full-Stack Developer',
-        link: '/full-stack',
-        type: 'role',
+        otherGroups: ['Web Development'],
       },
     ],
   },
@@ -70,16 +68,11 @@ const groups: GroupType[] = [
         type: 'role',
         otherGroups: ['Web Development'],
       },
-      {
-        title: 'DevOps',
-        link: '/devops',
-        type: 'role',
-      },
       {
         title: 'Full Stack',
         link: '/full-stack',
         type: 'role',
-        otherGroups: ['Web Development'],
+        otherGroups: ['Web Development', 'Absolute Beginners'],
       },
       {
         title: 'QA',
@@ -129,35 +122,6 @@ const groups: GroupType[] = [
       },
     ],
   },
-  {
-    group: 'DevOps',
-    roadmaps: [
-      {
-        title: 'DevOps',
-        link: '/devops',
-        type: 'role',
-        otherGroups: ['Web Development'],
-      },
-      {
-        title: 'Docker',
-        link: '/docker',
-        type: 'skill',
-        otherGroups: ['Web Development'],
-      },
-      {
-        title: 'Kubernetes',
-        link: '/kubernetes',
-        type: 'skill',
-        otherGroups: ['Web Development'],
-      },
-      {
-        title: 'AWS',
-        link: '/aws',
-        type: 'skill',
-        otherGroups: ['Web Development'],
-      },
-    ],
-  },
   {
     group: 'Languages / Platforms',
     roadmaps: [
@@ -216,6 +180,35 @@ const groups: GroupType[] = [
       },
     ],
   },
+  {
+    group: 'DevOps',
+    roadmaps: [
+      {
+        title: 'DevOps',
+        link: '/devops',
+        type: 'role',
+        otherGroups: ['Web Development'],
+      },
+      {
+        title: 'Docker',
+        link: '/docker',
+        type: 'skill',
+        otherGroups: ['Web Development'],
+      },
+      {
+        title: 'Kubernetes',
+        link: '/kubernetes',
+        type: 'skill',
+        otherGroups: ['Web Development'],
+      },
+      {
+        title: 'AWS',
+        link: '/aws',
+        type: 'skill',
+        otherGroups: ['Web Development'],
+      },
+    ],
+  },
   {
     group: 'Mobile Development',
     roadmaps: [
@@ -439,6 +432,7 @@ export function RoadmapsPage() {
               </button>
               {groups.map((group) => (
                 <button
+                  key={group.group}
                   className={cn(
                     'border-b bg-gradient-to-l py-1.5 pr-3 text-right text-sm text-gray-500 hover:from-white hover:text-gray-900',
                     {
@@ -457,7 +451,7 @@ export function RoadmapsPage() {
         </div>
         <div className="flex flex-grow flex-col gap-6 pb-20 pt-8">
           {visibleGroups.map((group) => (
-            <div>
+            <div key={`${group.group}-${group.roadmaps.length}`}>
               <h2 className="mb-2 text-xs uppercase tracking-wide text-gray-400">
                 {group.group}
               </h2>
@@ -465,6 +459,7 @@ export function RoadmapsPage() {
               <div className="grid grid-cols-3 gap-1.5">
                 {group.roadmaps.map((roadmap) => (
                   <a
+                    key={roadmap.link}
                     className="rounded-md border bg-white px-3 py-2 text-left text-sm shadow-sm transition-all hover:border-gray-300 hover:bg-gray-50"
                     href={roadmap.link}
                   >