feat(SPA): users page and invite modal

web/src/components/InviteStatusBadge.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+	defineProps<{
+		status: 'accepted' | 'pending' | 'expired'
+		size?: 'sm' | 'md'
+	}>(),
+	{
+		size: 'md',
+	},
+)
+
+const badges = {
+	accepted: {
+		label: 'Accepted',
+		icon: 'i-lucide-circle-check',
+		color: 'success',
+		class: 'border border-(--rc-success-soft) bg-(--rc-success-soft) text-success',
+	},
+	pending: {
+		label: 'Pending',
+		icon: 'i-lucide-mail',
+		color: 'warning',
+		class: 'border border-(--rc-warning-soft) bg-(--rc-warning-soft) text-warning',
+	},
+	expired: {
+		label: 'Expired',
+		icon: 'i-lucide-clock-alert',
+		color: 'neutral',
+		class: 'border border-accented bg-transparent text-muted',
+	},
+} as const
+
+const badge = computed(() => badges[props.status])
+const sizeClass = computed(() => (props.size === 'sm' ? 'h-5 px-1.5' : 'h-5.5 px-1.75'))
+</script>
+
+<template>
+	<UBadge
+		:color="badge.color"
+		variant="soft"
+		:icon="badge.icon"
+		:class="[badge.class, sizeClass]"
+		:ui="{ base: 'gap-1 py-0 text-xs', leadingIcon: 'size-3' }"
+	>
+		{{ badge.label }}
+	</UBadge>
+</template>