nocodb/packages/nc-gui/components/roles/Badge.vue

<script lang="ts" setup>
import { RoleColors, RoleIcons, RoleLabels } from 'nocodb-sdk'
import { toRef } from '#imports'

const props = withDefaults(
  defineProps<{
    role: keyof typeof RoleLabels
    clickable?: boolean
    inherit?: boolean
    border?: boolean
  }>(),
  {
    clickable: false,
    inherit: false,
    border: true,
  },
)

const roleRef = toRef(props, 'role')
const clickableRef = toRef(props, 'clickable')
const inheritRef = toRef(props, 'inherit')
const borderRef = toRef(props, 'border')

const roleProperties = computed(() => {
  const role = roleRef.value

  const color = RoleColors[role]
  const icon = RoleIcons[role]
  const label = RoleLabels[role]

  return {
    color,
    icon,
    label,
  }
})

console.log('dummy')
</script>

<template>
  <div
    class="flex items-center !border-0"
    :class="{
      'cursor-pointer': clickableRef,
    }"
    style="width: fit-content"
  >
    <NcBadge class="!h-auto !px-[8px]" :color="roleProperties.color" :border="borderRef">
      <div
        class="badge-text flex items-center gap-[4px]"
        :class="{
          'text-purple-500': roleProperties.color === 'purple',
          'text-blue-500': roleProperties.color === 'blue',
          'text-green-500': roleProperties.color === 'green',
          'text-orange-500': roleProperties.color === 'orange',
          'text-yellow-500': roleProperties.color === 'yellow',
          'text-red-500': roleProperties.color === 'red',
          'text-gray-300': !roleProperties.color,
        }"
      >
        <GeneralIcon :icon="roleProperties.icon" />
        {{ roleProperties.label }}
        <GeneralIcon v-if="clickableRef" icon="arrowDown" />
      </div>
    </NcBadge>
    <div class="flex-1"></div>
    <a-tooltip v-if="inheritRef" placement="bottom">
      <div class="text-gray-400 text-xs p-1 rounded-md">Current Workspace Role</div>
    </a-tooltip>
  </div>
</template>

<style scoped lang="scss"></style>