first commit

resources/js/components/users/StatusBadge.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+    label: string;
+    /** Mirrors UserPresenter::labelClass(). */
+    variant: string;
+}>();
+
+const variants: Record<string, string> = {
+    success: 'bg-green-100 text-green-800',
+    danger: 'bg-red-100 text-red-800',
+    warning: 'bg-amber-100 text-amber-800',
+};
+
+const classes = computed(() => variants[props.variant] ?? variants.warning);
+</script>
+
+<template>
+    <span class="inline-block rounded-full px-3 py-1 text-xs font-semibold" :class="classes">
+        {{ label }}
+    </span>
+</template>