ohmyform-ui/components/user/role.tsx

import {Tag} from "antd"
import React, {CSSProperties} from 'react'

interface Props {
  roles: string[]
}

export const UserRole: React.FC<Props> = props => {
  let color
  let level = 'unknown'
  const css: CSSProperties = {}


  if (props.roles.includes('superuser')) {
    color = 'red'
    level = 'superuser'
  } else if (props.roles.includes('admin')) {
    color = 'orange'
    level = 'admin'
  } else if (props.roles.includes('user')) {
    color = '#F0F0F0'
    css.color = '#AAA'
    level = 'user'
  }

  return (
    <Tag
      color={color}
      style={css}
    >
      {level.toUpperCase()}
    </Tag>
  )
}