grid ordering

src/components/ResultGrid.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 
 import Image from 'next/image'
-import { SarifApiResponse } from '../lib/apiClient'
+import { Badge, SarifApiResponse } from '../lib/apiClient'
 import { cn } from '../lib/utils'
 import ResultTable from './ResultTable'
 import { config } from '../config'
@@ -11,6 +11,23 @@ interface Props {
     currentScan: SarifApiResponse | null
 }
 
+const order = [
+    'maintained:bronze',
+    'maintained:silver',
+    'maintained:gold',
+    'reused:bronze',
+    'reused:silver',
+    'reused:gold',
+    'open-source:gold',
+]
+
+const sortBadges = (a: Badge, b: Badge): number => {
+    return (
+        order.indexOf(a.badgeId + ':' + a.badgeLevel) -
+        order.indexOf(b.badgeId + ':' + b.badgeLevel)
+    )
+}
+
 export default function ResultGrid({ currentScan }: Props) {
     return (
         <div className="py-10">
@@ -39,9 +56,7 @@ export default function ResultGrid({ currentScan }: Props) {
                         <div className="-mx-6 grid grid-cols-1 gap-0.5 overflow-hidden px-6 sm:mx-0 sm:rounded-2xl sm:px-0 md:grid-cols-3">
                             {currentScan.runs[0].properties.testedRepository &&
                                 currentScan?.runs[0].properties.badges
-                                    .sort((a, b) =>
-                                        a.badgeId.localeCompare(b.badgeId),
-                                    )
+                                    .sort(sortBadges)
                                     .map((badge) => (
                                         <div
                                             className="overflow-hidden rounded-xl bg-gray-400/10 p-10 sm:rounded-none"