update

frontend/src/components/Badge.vue

@@ -0,0 +1,56 @@
+<template>
+  <span :class="['badge', `badge-${variant}`]">
+    <slot>{{ text }}</slot>
+  </span>
+</template>
+
+<script setup>
+defineProps({
+  text: String,
+  variant: {
+    type: String,
+    default: 'default'
+    // default, critical, error, warn, success, info
+  }
+})
+</script>
+
+<style scoped>
+.badge {
+  display: inline-block;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 4px;
+}
+
+.badge-default {
+  background: #e9ecef;
+  color: #495057;
+}
+
+.badge-critical {
+  background: #e74c3c;
+  color: white;
+}
+
+.badge-error {
+  background: #e74c3c;
+  color: white;
+}
+
+.badge-warn {
+  background: #f39c12;
+  color: white;
+}
+
+.badge-success {
+  background: #27ae60;
+  color: white;
+}
+
+.badge-info {
+  background: #3498db;
+  color: white;
+}
+</style>