feat(SPA): screen to manage API keys (PART 2/3)

web/src/components/ApiKeyStatusBadge.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+import type { ApiKeyStatus } from '@/composables/useApiKeys'
+
+const props = defineProps<{ status: ApiKeyStatus }>()
+
+const badges = {
+	active: {
+		get label() {
+			return t('active')
+		},
+		color: 'success',
+		class: 'bg-(--rc-success-soft) text-success',
+	},
+	expired: {
+		get label() {
+			return t('expired')
+		},
+		color: 'warning',
+		class: 'bg-(--rc-warning-soft) text-warning',
+	},
+	revoked: {
+		get label() {
+			return t('revoked')
+		},
+		color: 'neutral',
+		class: 'bg-elevated text-muted',
+	},
+} as const
+
+const badge = computed(() => badges[props.status])
+</script>
+
+<template>
+	<UBadge
+		:color="badge.color"
+		variant="soft"
+		:class="badge.class"
+		:ui="{ base: 'h-5 px-1.5 py-0 text-xs' }"
+	>
+		{{ badge.label }}
+	</UBadge>
+</template>