feat(SPA): media page T0

web/src/components/MediaBadge.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+	defineProps<{
+		kind: 'unused' | 'duplicate' | 'used' | 'online' | 'draft'
+		label: string
+		size?: 'sm' | 'md'
+	}>(),
+	{ size: 'sm' },
+)
+
+const OUTLINE = 'border border-accented bg-transparent text-toned'
+
+const badges = {
+	unused: {
+		icon: 'i-lucide-unlink',
+		class: 'border border-(--rc-warning-soft) bg-(--rc-warning-soft) text-warning',
+	},
+	duplicate: {
+		icon: 'i-lucide-copy',
+		class: 'border border-(--rc-info-soft) bg-(--rc-info-soft) text-info',
+	},
+	used: { icon: undefined, class: OUTLINE },
+	online: {
+		icon: 'i-lucide-globe',
+		class: 'border border-inverted bg-inverted text-inverted',
+	},
+	draft: { icon: 'i-lucide-pencil-line', class: OUTLINE },
+} as const
+
+const badge = computed(() => badges[props.kind])
+const sizeClass = computed(() => (props.size === 'md' ? 'h-5.5 px-1.5' : 'h-5 px-1.5'))
+</script>
+
+<template>
+	<UBadge
+		color="neutral"
+		variant="soft"
+		:icon="badge.icon"
+		:class="[badge.class, sizeClass]"
+		:data-kind="kind"
+		:ui="{ base: 'gap-1 py-0 text-xs whitespace-nowrap', leadingIcon: 'size-3' }"
+	>
+		{{ label }}
+	</UBadge>
+</template>