39 lines
907 B
Vue
39 lines
907 B
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { MESSAGE_STATUS } from './constants';
|
|
|
|
import Icon from 'next/icon/Icon.vue';
|
|
|
|
const { status } = defineProps({
|
|
status: {
|
|
type: String,
|
|
required: true,
|
|
validator: value => Object.values(MESSAGE_STATUS).includes(value),
|
|
},
|
|
});
|
|
|
|
const statusIcon = computed(() => {
|
|
const statusIconMap = {
|
|
[MESSAGE_STATUS.SENT]: 'i-lucide-check',
|
|
[MESSAGE_STATUS.DELIVERED]: 'i-lucide-check-check',
|
|
[MESSAGE_STATUS.READ]: 'i-lucide-check-check',
|
|
};
|
|
|
|
return statusIconMap[status];
|
|
});
|
|
|
|
const statusColor = computed(() => {
|
|
const statusIconMap = {
|
|
[MESSAGE_STATUS.SENT]: 'text-n-slate-10',
|
|
[MESSAGE_STATUS.DELIVERED]: 'text-n-slate-10',
|
|
[MESSAGE_STATUS.READ]: 'text-[#7EB6FF]',
|
|
};
|
|
|
|
return statusIconMap[status];
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Icon :icon="statusIcon" :class="statusColor" class="size-[14px]" />
|
|
</template>
|