jws-frontend/src/components/BadgeComponent.vue

<script setup lang="ts">
defineProps<{
  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); `"
  >
    &#128900;
    {{ title || (!!titleI18n ? $t(titleI18n) : '-') }}
  </div>
</template>

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