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

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