58 lines
1.2 KiB
Vue
58 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { computed } from 'vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
status: 'accepted' | 'pending' | 'expired'
|
|
size?: 'sm' | 'md'
|
|
}>(),
|
|
{
|
|
size: 'md',
|
|
},
|
|
)
|
|
|
|
const badges = {
|
|
accepted: {
|
|
get label() {
|
|
return t('Accepted')
|
|
},
|
|
icon: 'i-lucide-circle-check',
|
|
color: 'success',
|
|
class: 'border border-(--rc-success-soft) bg-(--rc-success-soft) text-success',
|
|
},
|
|
pending: {
|
|
get label() {
|
|
return t('Pending')
|
|
},
|
|
icon: 'i-lucide-mail',
|
|
color: 'warning',
|
|
class: 'border border-(--rc-warning-soft) bg-(--rc-warning-soft) text-warning',
|
|
},
|
|
expired: {
|
|
get label() {
|
|
return t('Expired')
|
|
},
|
|
icon: 'i-lucide-clock-alert',
|
|
color: 'neutral',
|
|
class: 'border border-accented bg-transparent text-muted',
|
|
},
|
|
} as const
|
|
|
|
const badge = computed(() => badges[props.status])
|
|
const sizeClass = computed(() => (props.size === 'sm' ? 'h-5 px-1.5' : 'h-5.5 px-1.75'))
|
|
</script>
|
|
|
|
<template>
|
|
<UBadge
|
|
:color="badge.color"
|
|
variant="soft"
|
|
:icon="badge.icon"
|
|
:class="[badge.class, sizeClass]"
|
|
:ui="{ base: 'gap-1 py-0 text-xs', leadingIcon: 'size-3' }"
|
|
>
|
|
{{ badge.label }}
|
|
</UBadge>
|
|
</template>
|