translates badges

src/components/ResultGrid.tsx

@@ -71,7 +71,7 @@ export default function ResultGrid({ currentScan }: Props) {
                                             </div>
                                             <p
                                                 className={cn(
-                                                    'text-sm',
+                                                    'text-base',
                                                     !badge.badgeGranted &&
                                                         'opacity-50',
                                                 )}

src/components/ResultTable.tsx

@@ -10,6 +10,44 @@ interface Props {
     currentScan: SarifApiResponse
 }
 
+const translateCriteriaStatus = (status: string) => {
+    switch (status) {
+        case 'open':
+            return 'Konnte nicht überprüft werden'
+        case 'pass':
+            return 'Bestanden'
+        case 'fail':
+            return 'Nicht bestanden'
+        default:
+            return status
+    }
+}
+
+const badgeTranslation: Record<string, Record<string, string>> = {
+    maintained: {
+        bronze: 'Aktive Wartung',
+        silver: 'Verlässliche Wartung',
+        gold: 'Krisensichere Wartung',
+    },
+    reused: {
+        bronze: 'Bereit zur Nutzung',
+        silver: 'Aktiv genutzt',
+        gold: 'Häufig aktiv genutzt',
+    },
+    'open-source': {
+        gold: 'Open Source lizenziert',
+    },
+}
+
+const translateBadge = (badgeId: string, level: string): string => {
+    if (badgeId in badgeTranslation) {
+        if (level in badgeTranslation[badgeId]) {
+            return badgeTranslation[badgeId][level]
+        }
+    }
+    return badgeId + ' ' + level
+}
+
 export default function ResultTable({ currentScan }: Props) {
     return (
         <div className="">
@@ -23,8 +61,10 @@ export default function ResultTable({ currentScan }: Props) {
                         <details className="">
                             <summary className="relative flex cursor-pointer flex-row justify-between text-lg font-medium text-gray-900">
                                 <span>
-                                    Details für: {badge.badgeId}{' '}
-                                    {badge.badgeLevel}
+                                    {translateBadge(
+                                        badge.badgeId,
+                                        badge.badgeLevel,
+                                    )}
                                     <Badge
                                         variant={
                                             badge.badgeGranted
@@ -34,12 +74,16 @@ export default function ResultTable({ currentScan }: Props) {
                                         className="ml-2"
                                     >
                                         {badge.badgeGranted
-                                            ? 'Granted'
-                                            : 'Not granted'}
+                                            ? 'Gewährt'
+                                            : 'Nicht gewährt'}
                                     </Badge>
                                 </span>
-
-                                <ChevronDownIcon className="w-5" />
+                                <div className="flex flex-row items-center gap-2">
+                                    <span className="text-sm text-gray-500">
+                                        Mehr informationen
+                                    </span>
+                                    <ChevronDownIcon className="w-4" />
+                                </div>
                             </summary>
                             <div className="mt-8">
                                 <div className="overflow-x-aut">
@@ -51,7 +95,7 @@ export default function ResultTable({ currentScan }: Props) {
                                                         scope="col"
                                                         className="col-span-1 py-3.5 pl-4 pr-3 text-left font-semibold sm:pl-6 lg:pl-8"
                                                     >
-                                                        Check
+                                                        Überprüfung
                                                     </th>
                                                     <th
                                                         scope="col"
@@ -121,9 +165,9 @@ export default function ResultTable({ currentScan }: Props) {
                                                                         ></span>
                                                                     </span>
                                                                     <div className="hidden sm:block">
-                                                                        {
-                                                                            criteria.status
-                                                                        }
+                                                                        {translateCriteriaStatus(
+                                                                            criteria.status,
+                                                                        )}
                                                                     </div>
                                                                 </div>
                                                             </td>

src/components/landing-page/ApiSmallDemo.tsx

@@ -18,7 +18,7 @@ export default function ApiSmallDemo() {
     return (
         <div className="mx-auto mt-16 max-w-7xl" id="api-small-demo">
             <Toaster />
-            <div className="relative isolate overflow-hidden bg-blue-900 px-6 py-24 shadow-2xl sm:rounded-3xl sm:px-24 xl:py-32">
+            <div className="relative isolate overflow-hidden bg-blue-900 px-6 py-24 shadow-2xl sm:px-24 xl:rounded-3xl xl:py-32">
                 <h2 className="mx-auto max-w-3xl text-center text-4xl font-semibold tracking-tight text-white sm:text-5xl">
                     Testen Sie die Badge API
                 </h2>
@@ -74,8 +74,10 @@ export default function ApiSmallDemo() {
                     </svg>
                 </div>
             </div>
-            <div>
-                <ResultGrid currentScan={currentScan} />
+            <div className="xl:py-10">
+                {Boolean(currentScan) && (
+                    <ResultGrid currentScan={currentScan} />
+                )}
             </div>
         </div>
     )