feat: SEO SPA Sites, Articles and Integration (4/4)

web/src/components/SeoStatusChip.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+import type { SeoChip } from '@/lib/articleSeoStatus'
+
+const props = withDefaults(
+	defineProps<{
+		chip: SeoChip
+		size?: 'sm' | 'md'
+	}>(),
+	{ size: 'md' },
+)
+
+const description = computed(() => {
+	if (props.chip.kind === 'hidden') {
+		return t('Hidden from search engines')
+	}
+	return props.chip.count === 1 ? t('1 suggestion') : t('{0} suggestions', [props.chip.count])
+})
+
+const appearance = computed(() =>
+	props.chip.kind === 'hidden'
+		? { icon: 'i-lucide-eye-off', class: 'border border-accented bg-transparent text-toned' }
+		: {
+				icon: 'i-lucide-lightbulb',
+				class: 'border border-(--rc-warning-soft) bg-(--rc-warning-soft) text-warning',
+			},
+)
+</script>
+
+<template>
+	<UBadge
+		role="img"
+		color="neutral"
+		variant="soft"
+		:icon="appearance.icon"
+		:title="description"
+		:aria-label="description"
+		data-testid="seo-status-chip"
+		:class="appearance.class"
+		:ui="{
+			base: [
+				size === 'md' ? 'h-5.5' : 'h-5',
+				'shrink-0 gap-1 px-1.5 py-0 text-xs font-medium whitespace-nowrap',
+			],
+			leadingIcon: 'size-3',
+		}"
+	>
+		{{ chip.kind === 'hidden' ? t('Hidden') : chip.count }}
+	</UBadge>
+</template>