books/src/components/StatusBadge.vue

<template>
  <Badge class="text-xs flex-center px-3 ml-2" :color="color" v-if="status">{{
    status
  }}</Badge>
</template>
<script>
import { statusColor } from 'src/utils/colors';

export default {
  name: 'StatusBadge',
  props: ['status'],
  computed: {
    color() {
      return statusColor[this.status];
    },
  },
};
</script>