jws-frontend/src/components/BadgeComponent.vue

<script setup lang="ts">
import { Icon } from '@iconify/vue';
defineProps<{
  icon?: string;
  title?: string;
  titleI18n?: string;
  hslaColor?: string;
}>();
</script>

<template>
  <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); `"
  >
    <Icon :icon="icon || 'mdi-circle-medium'" style="margin-right: 0.25rem" />
    {{ title || (!!titleI18n ? $t(titleI18n) : '-') }}
  </div>
</template>

<style scoped>
div {
  display: inline-flex;
}
</style>