65 lines
1.3 KiB
Vue
65 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
kind: 'default' | 'noindex' | 'linked' | 'guest' | 'builtin'
|
|
}>()
|
|
|
|
const badges = {
|
|
default: {
|
|
get label() {
|
|
return t('Default')
|
|
},
|
|
icon: 'i-lucide-star',
|
|
class: 'border border-(--rc-sand) bg-(--rc-sand) text-(--rc-on-sand)',
|
|
},
|
|
noindex: {
|
|
get label() {
|
|
return t('Noindex')
|
|
},
|
|
icon: 'i-lucide-eye-off',
|
|
class: 'border border-(--rc-warning-soft) bg-(--rc-warning-soft) text-warning',
|
|
},
|
|
linked: {
|
|
get label() {
|
|
return t('Linked')
|
|
},
|
|
icon: 'i-lucide-link',
|
|
class: 'border border-(--rc-info-soft) bg-(--rc-info-soft) text-info',
|
|
},
|
|
guest: {
|
|
get label() {
|
|
return t('Guest')
|
|
},
|
|
icon: 'i-lucide-user',
|
|
class: 'border border-accented bg-transparent text-toned',
|
|
},
|
|
builtin: {
|
|
get label() {
|
|
return t('Built-in')
|
|
},
|
|
icon: 'i-lucide-lock',
|
|
class: 'border border-accented bg-transparent text-toned',
|
|
},
|
|
} as const
|
|
|
|
const badge = computed(() => badges[props.kind])
|
|
</script>
|
|
|
|
<template>
|
|
<UBadge
|
|
color="neutral"
|
|
variant="soft"
|
|
:icon="badge.icon"
|
|
:class="badge.class"
|
|
:ui="{
|
|
base: 'h-5 shrink-0 gap-1 px-1.5 py-0 text-xs whitespace-nowrap',
|
|
leadingIcon: 'size-3',
|
|
}"
|
|
>
|
|
{{ badge.label }}
|
|
</UBadge>
|
|
</template>
|