opnform-host-nginx/client/components/global/Badge.vue

<template>
  <div :class="classes">
    <Icon
      v-if="beforeIcon"
      :name="beforeIcon"
      :class="iconClasses"
    />
    <slot />
    <Icon
      v-if="afterIcon"
      :name="afterIcon"
      :class="iconClasses"
    />
  </div>
</template>

<script setup>
import { default as _has } from "lodash/has"

const props = defineProps({
  color: {
    type: String,
    default: "green",
  },
  beforeIcon: {
    type: String,
    default: null,
  },
  afterIcon: {
    type: String,
    default: null,
  },
})

const baseClasses = {
  green: ["bg-green-100", "border", "border-green-300", "text-green-700"],
  red: ["bg-red-100", "border", "border-red-300", "text-red-700"],
  gray: ["bg-gray-100", "border", "border-gray-300", "text-gray-700"],
}

const iconBaseClasses = {
  green: ["text-green-500"],
  red: ["text-red-500"],
  gray: ["text-gray-500"],
}

const activeColor = computed(() => {
  return _has(baseClasses, props.color) ? props.color : "gray"
})

const classes = computed(() => {
  const classes = [
    "border",
    "text-xs",
    "px-2",
    "inline-flex",
    "items-center",
    "rounded-full",
  ].concat(baseClasses[activeColor.value])
  return classes.join(" ")
})

const iconClasses = computed(() => {
  return iconBaseClasses[activeColor.value].concat(["w-2 h-2 mr-1"]).join(" ")
})
</script>