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

web/src/components/ArticleStatusBadge.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { t } from '@/i18n'
 
-withDefaults(
+import { computed } from 'vue'
+
+const props = withDefaults(
 	defineProps<{
 		online: boolean
 		size?: 'sm' | 'md' | 'lg'
@@ -11,6 +13,9 @@ withDefaults(
 		size: 'md',
 	},
 )
+
+const themeSize = computed(() => (props.size === 'sm' ? 'md' : props.size))
+const compact = computed(() => (props.size === 'sm' ? 'h-5 px-1.5' : undefined))
 </script>
 
 <template>
@@ -19,13 +24,20 @@ withDefaults(
 		color="neutral"
 		variant="outline"
 		icon="i-lucide-loader-circle"
-		:size="size"
-		:class="size === 'lg' ? undefined : 'px-2'"
+		:size="themeSize"
+		:class="[size === 'lg' ? undefined : 'px-2', compact]"
 		:ui="{ leadingIcon: 'animate-spin' }"
 	>
 		{{ pending === 'publish' ? t('Publishing…') : t('Unpublishing…') }}
 	</UBadge>
-	<UBadge v-else-if="online" color="neutral" variant="solid" icon="i-lucide-globe" :size="size">
+	<UBadge
+		v-else-if="online"
+		color="neutral"
+		variant="solid"
+		icon="i-lucide-globe"
+		:size="themeSize"
+		:class="compact"
+	>
 		{{ t('Online') }}
 	</UBadge>
 	<UBadge
@@ -33,8 +45,8 @@ withDefaults(
 		color="neutral"
 		variant="outline"
 		icon="i-lucide-pencil-line"
-		:size="size"
-		:class="size === 'lg' ? undefined : 'px-2'"
+		:size="themeSize"
+		:class="[size === 'lg' ? undefined : 'px-2', compact]"
 	>
 		{{ t('Draft') }}
 	</UBadge>