From dfe749d2063376b671f5b3187e5dd62982baad80 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Fri, 25 Oct 2024 17:27:32 +0700
Subject: [PATCH] refactor: create BadgeCompoent

---
 src/components/BadgeCompoent.vue | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 src/components/BadgeCompoent.vue

diff --git a/src/components/BadgeCompoent.vue b/src/components/BadgeCompoent.vue
new file mode 100644
index 00000000..855da93e
--- /dev/null
+++ b/src/components/BadgeCompoent.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineProps<{
+  titleI18n: string;
+  hslaColor?: string;
+}>();
+</script>
+
+<template>
+  <span
+    class="rounded flex flex-center q-pa-xs"
+    :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>
+</template>
+
+<style scoped></style>