53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { computed } from 'vue'
|
|
import type { SeoChip } from '@/lib/articleSeoStatus'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
chip: SeoChip
|
|
size?: 'sm' | 'md'
|
|
}>(),
|
|
{ size: 'md' },
|
|
)
|
|
|
|
const description = computed(() => {
|
|
if (props.chip.kind === 'hidden') {
|
|
return t('Hidden from search engines')
|
|
}
|
|
return props.chip.count === 1 ? t('1 suggestion') : t('{0} suggestions', [props.chip.count])
|
|
})
|
|
|
|
const appearance = computed(() =>
|
|
props.chip.kind === 'hidden'
|
|
? { icon: 'i-lucide-eye-off', class: 'border border-accented bg-transparent text-toned' }
|
|
: {
|
|
icon: 'i-lucide-lightbulb',
|
|
class: 'border border-(--rc-warning-soft) bg-(--rc-warning-soft) text-warning',
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<UBadge
|
|
role="img"
|
|
color="neutral"
|
|
variant="soft"
|
|
:icon="appearance.icon"
|
|
:title="description"
|
|
:aria-label="description"
|
|
data-testid="seo-status-chip"
|
|
:class="appearance.class"
|
|
:ui="{
|
|
base: [
|
|
size === 'md' ? 'h-5.5' : 'h-5',
|
|
'shrink-0 gap-1 px-1.5 py-0 text-xs font-medium whitespace-nowrap',
|
|
],
|
|
leadingIcon: 'size-3',
|
|
}"
|
|
>
|
|
{{ chip.kind === 'hidden' ? t('Hidden') : chip.count }}
|
|
</UBadge>
|
|
</template>
|