diff --git a/src/components/ResultGrid.tsx b/src/components/ResultGrid.tsx
index 2452741b10589a6132c3bd44677c1df99f571d2a..7f718de66bbadf3b25a7bd060ce3d75d9ffa2736 100644
--- a/src/components/ResultGrid.tsx
+++ b/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',
)}
diff --git a/src/components/ResultTable.tsx b/src/components/ResultTable.tsx
index feca39b70401f525111d852461d8b94aa6f9e9cc..9a2ca8ede5b44a26ae71520ecd18864ac88cc2f9 100644
--- a/src/components/ResultTable.tsx
+++ b/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>
diff --git a/src/components/landing-page/ApiSmallDemo.tsx b/src/components/landing-page/ApiSmallDemo.tsx
index 8c7b546fec5ad21e94b450970412077107200ec0..3b7ad5e3a6cbbeed03df5e373014ee65c98a0abe 100644
--- a/src/components/landing-page/ApiSmallDemo.tsx
+++ b/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>
)