43 lines
1.1 KiB
Vue
43 lines
1.1 KiB
Vue
<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>
|