Files
ficheagent/resources/js/Components/App/StatusBadge.vue

25 lines
839 B
Vue

<script setup>
import { computed } from 'vue';
const props = defineProps({
status: {
type: String,
required: true,
},
});
import { statusConfig } from '@/Utils/statuses';
const config = computed(() => statusConfig[props.status] || { label: props.status, class: 'bg-gray-100 text-gray-800' });
</script>
<template>
<span :class="['inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium', config.class]">
<span v-if="status === 'in_progress' || status === 'waiting_validation'" class="flex h-1.5 w-1.5 mr-1.5">
<span class="animate-ping absolute inline-flex h-1.5 w-1.5 rounded-full bg-current opacity-75"></span>
<span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-current"></span>
</span>
{{ config.label }}
</span>
</template>