refactor: allow non i118n text to be passed

src/components/BadgeCompoent.vue

@@ -1,18 +1,23 @@
 <script setup lang="ts">
 defineProps<{
-  titleI18n: string;
+  title?: string;
+  titleI18n?: string;
   hslaColor?: string;
 }>();
 </script>
 
 <template>
-  <span
-    class="rounded flex flex-center q-pa-xs"
+  <div
+    class="rounded q-px-sm flex-center"
     :style="`color: hsla(var(${!!hslaColor ? hslaColor : '--green-6-hsl'}) / 0.8);  background: hsla(var(${!!hslaColor ? hslaColor : '--green-6-hsl'}) / 0.1); `"
   >
     &#128900;
-    {{ $t(titleI18n) }}
-  </span>
+    {{ title || (!!titleI18n ? $t(titleI18n) : '-') }}
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+div {
+  display: inline-flex;
+}
+</style>