41 lines
1.0 KiB
Vue
41 lines
1.0 KiB
Vue
<template>
|
|
<span :class="['gp-badge', badgeClass]">
|
|
{{ label }}
|
|
</span>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
status: { type: String, required: true },
|
|
text: { type: String, default: '' }
|
|
});
|
|
|
|
const label = computed(() => props.text || props.status.toUpperCase());
|
|
|
|
const badgeClass = computed(() => {
|
|
const s = props.status.toLowerCase();
|
|
if (s === 'pending' || s === 'sibuk') return 'gp-badge-danger';
|
|
if (s === 'selesai' || s === 'tersedia' || s === 'proses') return 'gp-badge-success';
|
|
return 'gp-badge-default';
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.gp-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2px 6px;
|
|
border-radius: 2px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
color: white;
|
|
}
|
|
.gp-badge-danger { background-color: var(--gp-danger, #ef4444); }
|
|
.gp-badge-success { background-color: var(--gp-success, #10b981); }
|
|
.gp-badge-default { background-color: var(--gp-text-secondary, #6b7280); }
|
|
</style>
|