simrsx-fe/app/components/pub/my-ui/badge/status-badge.vue

<script setup lang="ts">
import { Badge } from '~/components/pub/ui/badge'
import { activeStatusCodes } from '~/lib/constants';

const props = defineProps<{
  rec: any
  idx?: number
}>()

const statusText = computed(() => {
  const code: keyof typeof activeStatusCodes = props.rec.status_code === 1 ? `active` : `inactive`
  return activeStatusCodes[code]
})

const badgeVariant = computed(() => {
  return props.rec.status_code === 1 ? 'default' : 'destructive'
})
</script>

<template>
  <div class="flex justify-center">
    <Badge :variant="badgeVariant" class="rounded-2xl text-[0.6rem]" >
      {{ statusText }}
    </Badge>
  </div>
</template>