ShowEasyFrontEnd/FrontEnd/components/exhibition/CardStatus.vue

<template>
  <v-btn
    class="rounded-lg px-2 no-text-transform text-space-1 text-capitalize" elevation="0"
    :color="statusColor[status]"
    :outlined="!isPostponed"
    :plain="!isPostponed"
    :ripple="false"
    small
  >
    {{ $t(StatusText[status]) }}
  </v-btn>
</template>

<script>
import { StatusText } from '~/utils/constant'

export default {
  name: 'CardStatus',
  props: {
    status: {
      type: String,
    },
  },
  data: () => ({
    statusColor: {
      "201": '#e99e9e',
      "102": 'error',
      "101": 'warning',
    },
    StatusText: {
      "100": "Upcoming",
      "101": "Ongoing",
      "102": "Postponed",
      "200": "Finished",
      "201": "Cancelled",
    },
  }),
  computed: {
    isPostponed() {
      return this.status === 'Postponed'
    },
  },
}
</script>