Display badges after tags in frontend

pennlabs · Aug 28, 2024 · 583e363 · 583e363
1 parent b419969
commit 583e363
Showing 1 changed file with 24 additions and 18 deletions.
diff --git a/frontend/components/common/TagGroup.tsx b/frontend/components/common/TagGroup.tsx
@@ -30,24 +30,30 @@ export const TagGroup = ({ tags = [] }: TagGroupProps): ReactElement | null => {
 
   return (
     <>
-      {Array.from(uniqueTags.values()).map((tag) =>
-        isBadge(tag) ? (
-          <DefaultTag
-            key={`${tag.id}-badge`}
-            color={tag.color}
-            className="tag is-rounded"
-          >
-            {tag.label}
-          </DefaultTag>
-        ) : (
-          <BlueTag
-            key={`${tag.id}-tag`}
-            className="tag is-rounded has-text-white"
-          >
-            {tag.name}
-          </BlueTag>
-        ),
-      )}
+      {Array.from(uniqueTags.values()) // display badges after tags
+        .sort((a, b) => {
+          if (isBadge(a) && !isBadge(b)) return 1
+          if (!isBadge(a) && isBadge(b)) return -1
+          return 0
+        })
+        .map((tag) =>
+          isBadge(tag) ? (
+            <DefaultTag
+              key={`${tag.id}-badge`}
+              color={tag.color}
+              className="tag is-rounded"
+            >
+              {tag.label}
+            </DefaultTag>
+          ) : (
+            <BlueTag
+              key={`${tag.id}-tag`}
+              className="tag is-rounded has-text-white"
+            >
+              {tag.name}
+            </BlueTag>
+          ),
+        )}
     </>
   )
 }