27 lines
782 B
Vue
27 lines
782 B
Vue
<script setup lang="ts">
|
|
import {
|
|
getOrderStatusBadgePresentation,
|
|
type OrderStatusTone,
|
|
} from '~/composables/useOrderStatusPresentation';
|
|
|
|
const props = defineProps<{
|
|
status: string;
|
|
}>();
|
|
|
|
const badgePresentation = computed(() => getOrderStatusBadgePresentation(props.status));
|
|
|
|
function dotClass(tone: OrderStatusTone) {
|
|
if (tone === 'success') return 'bg-[#139957]';
|
|
if (tone === 'danger') return 'bg-[#d94b55]';
|
|
if (tone === 'warning') return 'bg-[#f1a43a]';
|
|
return 'bg-[#2e8de4]';
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<span class="inline-flex items-center gap-2 text-sm font-semibold leading-tight text-[#123824]">
|
|
<span class="h-2.5 w-2.5 rounded-full" :class="dotClass(badgePresentation.tone)" />
|
|
<span>{{ badgePresentation.label }}</span>
|
|
</span>
|
|
</template>
|