src/shared/components/common/user-badges.tsx

   1 import classNames from "classnames";
   2 import { Component } from "inferno";
   3 import { I18NextService } from "../../services";
   4
   5 interface UserBadgesProps {
   6   isBanned?: boolean;
   7   isDeleted?: boolean;
   8   isPostCreator?: boolean;
   9   isMod?: boolean;
  10   isAdmin?: boolean;
  11   isBot?: boolean;
  12   classNames?: string;
  13 }
  14
  15 export function getRoleLabelPill({
  16   label,
  17   tooltip,
  18   classes,
  19   shrink = true,
  20 }: {
  21   label: string;
  22   tooltip: string;
  23   classes?: string;
  24   shrink?: boolean;
  25 }) {
  26   return (
  27     <span
  28       className={`badge ${classes ?? "text-bg-light"}`}
  29       aria-label={tooltip}
  30       data-tippy-content={tooltip}
  31     >
  32       {shrink ? label[0].toUpperCase() : label}
  33     </span>
  34   );
  35 }
  36
  37 export class UserBadges extends Component<UserBadgesProps> {
  38   render() {
  39     return (
  40       (this.props.isBanned ||
  41         this.props.isPostCreator ||
  42         this.props.isMod ||
  43         this.props.isAdmin ||
  44         this.props.isBot) && (
  45         <span
  46           className={classNames(
  47             "row d-inline-flex gx-1",
  48             this.props.classNames
  49           )}
  50         >
  51           {this.props.isBanned && (
  52             <span className="col">
  53               {getRoleLabelPill({
  54                 label: I18NextService.i18n.t("banned"),
  55                 tooltip: I18NextService.i18n.t("banned"),
  56                 classes: "text-bg-danger",
  57                 shrink: false,
  58               })}
  59             </span>
  60           )}
  61           {this.props.isDeleted && (
  62             <span className="col">
  63               {getRoleLabelPill({
  64                 label: I18NextService.i18n.t("deleted"),
  65                 tooltip: I18NextService.i18n.t("deleted"),
  66                 classes: "text-bg-danger",
  67                 shrink: false,
  68               })}
  69             </span>
  70           )}
  71
  72           {this.props.isPostCreator && (
  73             <span className="col">
  74               {getRoleLabelPill({
  75                 label: I18NextService.i18n.t("op").toUpperCase(),
  76                 tooltip: I18NextService.i18n.t("creator"),
  77                 classes: "text-bg-info",
  78                 shrink: false,
  79               })}
  80             </span>
  81           )}
  82           {this.props.isMod && (
  83             <span className="col">
  84               {getRoleLabelPill({
  85                 label: I18NextService.i18n.t("mod"),
  86                 tooltip: I18NextService.i18n.t("mod"),
  87                 classes: "text-bg-primary",
  88               })}
  89             </span>
  90           )}
  91           {this.props.isAdmin && (
  92             <span className="col">
  93               {getRoleLabelPill({
  94                 label: I18NextService.i18n.t("admin"),
  95                 tooltip: I18NextService.i18n.t("admin"),
  96                 classes: "text-bg-danger",
  97               })}
  98             </span>
  99           )}
 100           {this.props.isBot && (
 101             <span className="col">
 102               {getRoleLabelPill({
 103                 label: I18NextService.i18n.t("bot_account").toLowerCase(),
 104                 tooltip: I18NextService.i18n.t("bot_account"),
 105               })}
 106             </span>
 107           )}
 108         </span>
 109       )
 110     );
 111   }
 112 }