feat(SPA): screens for Sites and Authors

web/src/components/DirectoryBadge.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+
+const props = defineProps<{
+	kind: 'default' | 'noindex' | 'linked' | 'guest'
+}>()
+
+const badges = {
+	default: {
+		get label() {
+			return t('Default')
+		},
+		icon: 'i-lucide-star',
+		class: 'border border-(--rc-sand) bg-(--rc-sand) text-(--rc-on-sand)',
+	},
+	noindex: {
+		get label() {
+			return t('Noindex')
+		},
+		icon: 'i-lucide-eye-off',
+		class: 'border border-(--rc-warning-soft) bg-(--rc-warning-soft) text-warning',
+	},
+	linked: {
+		get label() {
+			return t('Linked')
+		},
+		icon: 'i-lucide-link',
+		class: 'border border-(--rc-info-soft) bg-(--rc-info-soft) text-info',
+	},
+	guest: {
+		get label() {
+			return t('Guest')
+		},
+		icon: 'i-lucide-user',
+		class: 'border border-accented bg-transparent text-toned',
+	},
+} as const
+
+const badge = computed(() => badges[props.kind])
+</script>
+
+<template>
+	<UBadge
+		color="neutral"
+		variant="soft"
+		:icon="badge.icon"
+		:class="badge.class"
+		:ui="{
+			base: 'h-5 shrink-0 gap-1 px-1.5 py-0 text-xs whitespace-nowrap',
+			leadingIcon: 'size-3',
+		}"
+	>
+		{{ badge.label }}
+	</UBadge>
+</template>