From 19398994c4a3b0f032d5ff6d7532b5ff6029afd1 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Wed, 23 Jul 2025 14:37:06 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feature:=20Badge=20component=20adde?=
 =?UTF-8?q?d?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/badge/VBadge.vue | 63 +++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 src/components/badge/VBadge.vue

diff --git a/src/components/badge/VBadge.vue b/src/components/badge/VBadge.vue
new file mode 100644
index 0000000..99a6f84
--- /dev/null
+++ b/src/components/badge/VBadge.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type IVBadge from './IVBadge.type';
+import Tag from 'primevue/tag';
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<IVBadge>(), {
+  type: undefined,
+  noIcon: false,
+  small: false,
+})
+
+const severity = computed(() => {
+    switch (props.type) {
+        case 'error': return 'danger';
+        case 'warning' : return 'warn';
+        case 'success' : return 'success';
+        case 'info': return 'info';
+        case 'new': return 'secondary';
+        default:
+            return undefined;
+    }
+});
+
+const icon = computed(() => {
+  switch (props.type) {
+    case 'error': return 'ri-close-circle-fill';
+    case 'warning' : return 'ri-alert-fill';
+    case 'success' : return 'ri-checkbox-circle-fill';
+    case 'info': return 'ri-information-fill';
+    case 'new': return 'ri-flashlight-fill';
+    default:
+      return undefined;
+    }
+})
+</script>
+
+<template>
+  <Tag
+    role="alert"
+    :value="props.label"
+    :severity="severity"
+    class="p-tag"
+    :style="(!!props.maxWidth) ? {width: props.maxWidth} : {width: 'fit-content'}"
+    :class="{'small': props.small}"
+  >
+    <template v-if="!props.noIcon || props.type === undefined">
+      <i :class="icon"></i>
+    </template>
+  </Tag>
+</template>
+
+<style lang="css" scoped>
+.p-tag.small{
+  --p-tag-icon-size: var( --text-body-SM-detail-text-Maj-size);
+  --p-tag-font-size: var( --text-body-XS-mention-text-Maj-size);
+  --p-tag-font-weight: var( --text-body-XS-mention-text-Maj-weight);
+  --p-tag-padding: 0.125rem 0.325rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
+