geo/apps/admin-web/src/components/ArticleGenerateStatus.vue

<script setup lang="ts">
import { LoadingOutlined } from '@ant-design/icons-vue'
import { computed } from 'vue'

import { getGenerateStatusMeta } from '@/lib/display'

const props = defineProps<{
  status?: string | null
}>()

const statusMeta = computed(() => getGenerateStatusMeta(props.status))
const isLoading = computed(
  () => props.status === 'queued' || props.status === 'generating' || props.status === 'running',
)
</script>

<template>
  <a-tag :color="statusMeta.color">
    <span class="article-generate-status">
      <LoadingOutlined v-if="isLoading" spin />
      <span>{{ statusMeta.label }}</span>
    </span>
  </a-tag>
</template>

<style scoped>
.article-generate-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
</style>