chore: add attribute badge

2025-12-02 18:57:52 +05:30
parent 8a983c10b4
commit 3b1e3683da
1 changed files with 42 additions and 0 deletions
@@ -0,0 +1,42 @@
+<script setup>
+import { computed } from 'vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  type: { type: String, default: 'resolution' },
+});
+
+const colorClass = computed(() => {
+  const colorMap = {
+    'pre-chat': 'blue',
+    resolution: 'teal',
+  };
+  const color = colorMap[props.type] || colorMap.resolution;
+  return `text-n-${color}-11`;
+});
+
+const iconName = computed(() => {
+  const iconMap = {
+    'pre-chat': 'i-lucide-message-circle',
+    resolution: 'i-lucide-circle-check-big',
+  };
+  return iconMap[props.type] || iconMap.resolution;
+});
+
+const displayLabel = computed(() => {
+  const labelMap = {
+    'pre-chat': 'Pre-chat',
+    resolution: 'Resolution',
+  };
+  return labelMap[props.type] || labelMap.resolution;
+});
+</script>
+
+<template>
+  <div
+    class="flex gap-1 justify-center items-center px-1.5 py-1 rounded-md shadow outline-1 outline outline-n-container bg-n-solid-2"
+  >
+    <Icon :icon="iconName" class="size-4" :class="colorClass" />
+    <span class="text-sm" :class="colorClass">{{ displayLabel }}</span>
+  </div>
+</template>