@fortawesome/free-solid-svg-icons#faExclamationTriangle TypeScript Examples

ErrorIndicator = () => (
  <div className={`${styles['progress-wrapper']} relative`}>
    <ProgressDonut
      size="2em"
      count={100}
      strokeWidth={3}
      items={[{ color: 'var(--red)', count: 100 }]}
    />
    <FontAwesomeIcon
      width={14}
      icon={faExclamationTriangle}
      className={`absolute text-red ${styles['check-icon']}`}
    />
  </div>
)

constructor(
    private networkService: NetworkService,
    private uiStyleToggleService: UiStyleToggleService,
    private thorchainNetworkService: ThorchainNetworkService) {
      this.optimalIcon = faCheckCircle;
      this.warningIcon = faExclamationCircle;
      this.alertIcon = faExclamationTriangle;
      this.theme = localStorage.getItem('THEME');

      const network$ = this.thorchainNetworkService.networkUpdated$.subscribe(
        (_) => {
          this.getNetworkStatus();
        }
      );

      this.subs = [network$];

  }

Label = ({
  attachment: { status }
}: {
  attachment: UseDraftTestimonyAttachment
}) => {
  return (
    <Form.Label>
      <span className="me-1">
        <b>(Optional) Upload PDF Attachment:</b> You may submit your testimony
        in PDF form, but you still need to enter a brief description of your
        testimony in the text field above.
      </span>
      {status === "loading" && <Spinner animation="border" size="sm" />}
      {status === "error" && (
        <FontAwesomeIcon icon={faExclamationTriangle} className="text-danger" />
      )}
    </Form.Label>
  )
}

// Description: add icons to be used in the app as needed
// Some are solid and some are from regular svg (hollow icons)
library.add(
  faSearch,
  faSearchPlus,
  faHome,
  faSpinner,
  faExclamationTriangle,
  faTrash,
  faTrashAlt,
  faEdit,
  faUser,
  faUserEdit,
  faUserPlus,
  faUserTimes,
  faUserMinus,
  faKey,
  faCheck,
  faCheckCircle,
  faCalendarDay,
  faClock,
  faCalendarAlt,
  farUser,
  faFileAlt
);

constructor(faIconLibrary: FaIconLibrary) {
    faIconLibrary.addIcons(
      faGithub,
      faMediumM,
      faPlus,
      faEdit,
      faTrash,
      faTimes,
      faCaretUp,
      faCaretDown,
      faExclamationTriangle,
      faFilter,
      faTasks,
      faCheck,
      faSquare,
      faLanguage,
      faPaintBrush,
      faLightbulb,
      faWindowMaximize,
      faStream,
      faBook
    );
  }

export function FormSubmit({ form, icon, label, state, disabled }: IFormSubmitProps) {
	const { formState: { errors, isSubmitting, isValidating } } = form

	const isValid = size(errors) === 0

	let color
	let iconEl
	if (!isValid) {
		color = "warning"
		iconEl = <Icon icon={faExclamationTriangle}/>
	} else {
		switch (state) {
			case "error":
				color = "error"
				iconEl = <Icon icon={faExclamationTriangle}/>
				break
			case "success":
				color = "success"
				iconEl = <Icon icon={faCheckDouble}/>
				break
			case "normal":
			default:
				color = "primary"
				iconEl = <Icon icon={icon ?? faCheck}/>
		}
	}

	return <LoadingButton
		type="submit"
		loading={isSubmitting || isValidating}
		loadingPosition="start"
		startIcon={iconEl}
		color={color as any}
		variant="contained"
		disabled={disabled}
	>
		{label}
	</LoadingButton>
}

function Markdown({ markdownString, className = '', variant = 'none' }: Props) {
  const markdownRef = useRef(null);

  // Whether or not we successfully lazy-loaded
  // the modules needed for this component (this happens)
  // in the `useEfffect` below
  const [didLoadModules, setDidLoadModules] = useState(undefined);

  useEffect(() => {
    Promise.all([
      import('marked'),
      import('dompurify'),
    ]).then(([markedModule, dompurifyModule]) => {
      const { marked } = markedModule;
      const dompurify = dompurifyModule.default;

      setDidLoadModules(true);
      markdownRef.current.innerHTML = dompurify.sanitize(marked.parse(markdownString));
    }).catch((err) => {
      setDidLoadModules(false);
      console.error('[Markdown.useEffect]', err);
    });
  }, [markdownString]);

  return (
    <div
      className={`
      ${styles.markdown}
      ${variant === 'transparent' && styles['is--transparent']}
      ${className}
    `}
      ref={markdownRef}
    >
      {didLoadModules === false && (
        <p className="font-light text-2xl">
          <FontAwesomeIcon
            size="2x"
            width="32"
            className="mr-2"
            icon={faExclamationTriangle}
          />
          Nu am putut încărca conținutul de tip Markdown. Încearcă
          să re-încarci pagina.
        </p>
      )}
    </div>
  );
}

constructor() {
    this.alertIcon = faExclamationTriangle;
  }

_initFontAwesome = () => {
    if ( _hasInitializedFontAwesome ) { return; }
    _hasInitializedFontAwesome = true;

    library.add(faCheckCircle, faPlug, faQuestionCircle, faExclamationTriangle, faWifi, faMapMarkerAlt, faClock);
}

ExclamationTriangle   = (styling={}) => ComponentForIconName(faExclamationTriangle.iconName, '', styling)

public constructor(private _matIconRegistry: MatIconRegistry, private _sanitizer: DomSanitizer) {
    this.addSvg(faAngleDoubleDown);
    this.addSvg(faArrowUp);
    this.addSvg(faArrowDown);
    this.addSvg(faSyncAlt);
    this.addSvg(faTimes);
    this.addSvg(faExternalLinkAlt);
    this.addSvg(faQuestionCircle);
    this.addSvg(faPlay);
    this.addSvg(faClock);
    this.addSvg(faBug);
    this.addSvg(faLink);
    this.addSvg(faDiscord);
    this.addSvg(faGithub);
    this.addSvg(faInfoCircle);
    this.addSvg(faCodeBranch);
    this.addSvg(faCaretDown);
    this.addSvg(faExclamationTriangle);
    this.addSvg(faCode);
    this.addSvg(faPatreon);
    this.addSvg(faCoins);
    this.addSvg(faCompressArrowsAlt);
    this.addSvg(faPencilAlt);
    this.addSvg(faCheckCircle);
    this.addSvg(faDiceD6);
    this.addSvg(faSearch);
    this.addSvg(faInfoCircle);
    this.addSvg(faNewspaper);
    this.addSvg(faCog);
    this.addSvg(faAngleUp);
    this.addSvg(faAngleDown);
    this.addSvg(faChevronRight);
    this.addSvg(faUserCircle);
    this.addSvg(faEllipsisV);
    this.addSvg(faCopy);
    this.addSvg(farCheckCircle);
    this.addSvg(faExclamation);
    this.addSvg(faTrash);
    this.addSvg(faHistory);
    this.addSvg(faCaretSquareRight);
    this.addSvg(faCaretSquareLeft);
    this.addSvg(faMinimize);
    this.addSvg(faUpRightFromSquare);
  }

fontAwesomeSolidIcons = {
    faAngleDown,
    faAngleRight,
    faArrowLeft,
    faBars,
    faBookOpen,
    faChartArea,
    faChartBar,
    faChartPie,
    faChevronDown,
    faChevronUp,
    faColumns,
    faSearch,
    faTable,
    faTachometerAlt,
    faUser,
    faExclamationTriangle,
    faSignOutAlt,
    faCalendarAlt,
    faCogs,
    faClipboardList,
    faHammer,
    faTools,
    faSync,
    faLock,
    faLockOpen,
    faTrash,
    faPlusCircle,
    faSpinner,
    faMap,
    faAnchor,
    faCity,
    faChessRook,
    faMountain,
    faCampground,
    faHome,
    faUniversity,
    faCrosshairs,
    faPlane,
    faWrench,
}

render() {
    const fontSize = Math.min(this.props.tableWidth * 0.04, this.props.fontSize);

    return (
      <>
        <div
          id="Avatar-UI"
          style={{
            top: this.props.avatarPosition[0] + 'px',
            left: this.props.avatarPosition[1] + 'px',
            display: this.props.avatarShow ? undefined : 'none',
          }}
          onMouseOver={this.renderButtonsTrue}
          onMouseLeave={this.renderButtonsFalse}
        >
          <div
            id="ave-graphics"
            style={{
              width: this.props.avatarSize + 'px',
              height: this.props.avatarSize + 'px',
              maxHeight: Math.max(this.props.tableWidth * 0.08, 45) + 'px',
              maxWidth: Math.max(this.props.tableWidth * 0.08, 45) + 'px',
              opacity: this.props.afk ? '0.5' : '1',
            }}
          >
            <div
              id="ave-background"
              className={
                this.background[this.state.currentBackground] +
                ' ' +
                ((this.state.avatarSelected && this.props.isPickable) || (this.props.highlighted) ? 'picked' : '')
              }
            />

            <div
              className={
                'ave tooltip ' +
                (this.props.killed ? 'killed ' : '') +
                (this.props.isPickable ? 'pickable' : 'not-pickable')
              }
              style={{
                backgroundImage:
                  'url(' +
                  (this.props.isRes ? this.props.resUrl : this.props.spyUrl) +
                  ')',
              }}
              onClick={this.pickPlayer}
            >
              {this.props.isPickable ? (
                <span className="tooltip-text">Click on this player to pick them</span>
              ) : null}
            </div>
            {this.props.hasClaimed ? (
              <div className="claim">
                <FontAwesomeIcon icon={faExclamationTriangle} />
              </div>
            ) : null}
            {this.props.killed ? <div className="ave-sword" /> : null}
            {this.props.onMission ? (
              <div className="ave-shield" ref={this.shieldLocation}>
                {this.props.shieldShow ? (
                  <div
                    style={{
                      transform: 'scale(' + this.props.shieldScale + ')',
                      top: this.props.shieldPosition[0] + 'px',
                      left: this.props.shieldPosition[1] + 'px',
                    }}
                    className="ave-shield-display"
                  />
                ) : null}
              </div>
            ) : null}
            {this.props.leader ? <div className="ave-flag" /> : null}
            {this.props.vote > -1 ? (
              <div className={'ave-vote-bubble ' + (this.props.vote === 1)} />
            ) : null}
            {this.state.renderButtons ? (
              <div className="ave-buttons">
                <button onClick={this.setBackgroundColor} className="tooltip">
                  <span className="tooltip-text">Mark this player's allegiance</span>
                  <FontAwesomeIcon icon={faStamp} />
                </button>
                <button onClick={this.toggleHighlightChat} className="tooltip">
                  <span className="tooltip-text">
                    Highlight this player's chat messages
                  </span>
                  <FontAwesomeIcon
                    style={{
                      backgroundColor: this.state.highlightChat
                        ? this.toHtmlHex(this.state.currentHighlight)
                        : '',
                    }}
                    icon={faPen}
                  />
                </button>
                <button onClick={this.showColorPicker} className="tooltip">
                  <span className="tooltip-text">
                    Change this player's highlight color
                  </span>
                  <FontAwesomeIcon icon={faPaintBrush} />
                </button>
              </div>
            ) : null}
          </div>
          <p
            className={'ave-username ' + (this.props.isMe ? 'me' : '')}
            style={{
              width: Math.max(this.props.tableWidth * 0.15, 40) + 'px',
              fontSize: Math.max(fontSize, 10) + 'px',
            }}
          >
            {this.props.card ? <FontAwesomeIcon icon={faAddressCard} /> : null}{' '}
            {this.props.hammer ? <FontAwesomeIcon icon={faGavel} /> : null}{' '}
            {this.props.username}
          </p>
          <p
            className={'ave-role ' + this.props.isRes}
            style={{
              opacity:
                this.props.role !== 'Spy?' && this.props.role !== 'Resistance?'
                  ? '1'
                  : '0',
              fontSize: Math.max(fontSize * 0.8, 8) + 'px',
            }}
          >
            {this.props.role}
          </p>
        </div>
        {this.state.renderPicker ? (
          <div className="hl-picker">
            <AvalonScrollbars>
              <div className="hl-stuff">
                <p>CHANGE HIGHLIGHT COLOR</p>
                <SketchPicker
                  color={this.state.currentHighlight}
                  onChange={this.handleHighlight}
                />
                <button onClick={this.hideColorPicker}>
                  <FontAwesomeIcon icon={faCheck} />
                </button>
              </div>
            </AvalonScrollbars>
          </div>
        ) : null}
      </>
    );
  }

render() {
    const {
      gameId,
      code,
      started,
      frozen,
      ended,
      seat,
      players,
      playerMax,
      roleSettings,
      active,
      clients,
    } = this.props;
    const { showForm, waitingResponse } = this.state;

    let message: Message = { ...this.defaultMessage };

    if (!started) {
      message = this.onWaiting(message);
    } else if (!frozen) {
      if (!ended) {
        message = this.inProgress(message);
      } else {
        message = this.onFinish(message);
      }
    } else {
      message = this.onFreeze(message);
    }

    if (!active) {
      message = this.onReplay(message);
    }

    if (waitingResponse) {
      message.text = 'Waiting for server response...';
      message.buttons = [];
    }

    let form = null;
    if (!started && showForm !== FormType.None) {
      if (showForm === FormType.Kick && seat === 0) {
        form = (
          <SelectablePlayerList
            title="Select a player to kick"
            text="Kick"
            // Skip the first player, since that's the game host and you can't kick yourself.
            players={players.slice(1)}
            onExit={this.hideForm}
            onSelect={(player: string) => {
              this.kickPlayer(player);
            }}
          />
        );
      }
      if (showForm === FormType.Settings && seat === 0) {
        form = (
          <GameForm
            title="MODIFY GAME SETTINGS"
            createsGame={false}
            gameId={gameId}
            initialRoleSettings={roleSettings}
            initialPlayerMax={playerMax}
            onExit={this.hideForm}
          />
        );
      }
      if (showForm === FormType.Info) {
        form = (
          <GameInfo
            roleSettings={roleSettings}
            playerMax={playerMax}
            onExit={this.hideForm}
          />
        );
      }
      if (showForm === FormType.Ready) {
        form = <ReadyForm onExit={this.hideForm} gameId={gameId} isPlaying={seat > -1} />;
      }
    }
    if (showForm === FormType.Report) {
      const arr = [...clients];
      if (seat > -1) arr.splice(seat, 1);

      form = (
        <ReportPlayer
          title="report player"
          text="Report"
          players={arr}
          onExit={this.hideForm}
          onSelect={this.reportPlayer}
        />
      );
    }

    return code === '-1' ? null : (
      <>
        <div className="nice-bar-above">
          <div className="button-b players">
            <p>
              {players.length}/{playerMax}
            </p>
          </div>
          <button
            className="button-b report-someone-with-this"
            type="button"
            onClick={this.showReport}
          >
            <p>
              <FontAwesomeIcon
                icon={faExclamationTriangle}
                className="exclamation-mark"
              />
              Report
            </p>
          </button>
        </div>
        <p className="message">{message.text}</p>{' '}
        {message.buttons.map((b, i) => (
          <div className="button-cont" key={i + b.className}>
            <Button type="button" {...b} />{' '}
          </div>
        ))}
        {form}
      </>
    );
  }

CoingatePaymentOptions: React.FC = observer(() => {
    const { payment } = useStores()
    const navigate = useNavigate()
    const [loading, setLoading] = useState(false)

    const isOptionActive = (cur: string) => {
        return payment.paymentCurrency == cur
    }
    const selectOption = (cur: string) => () => {
        payment.setPaymentCurrency(cur)
    }
    const setUseLightning = (): void => {
        const val = !payment.lightningNetwork
        payment.setLightningNetwork(val)
    }

    const handleNextClick = async () => {
        setLoading(() => true)
        try {
            await payment.createOrder()
            setLoading(() => false)
            navigate("../" + topupSteps.coingateOrderSummary)
        } catch (err) {
            setLoading(() => false)
            const msg = parseError(err)
            logErrorMessage("Could not create a payment order", msg)
            toast.error(dismissibleToast(<span>{msg.humanReadable}</span>))
        }
    }
    const options = payment.paymentMethod?.gatewayData.currencies.filter((it) => it !== Currency.MYST) || []
    return (
        <ViewContainer>
            <ViewNavBar onBack={() => navigate(-1)}>
                <div style={{ width: 375, textAlign: "center" }}>
                    <StepProgressBar step={1} />
                </div>
            </ViewNavBar>
            <ViewSplit>
                <ViewSidebar>
                    <SideTop>
                        <IconWallet color={brandLight} />
                        <Title>Top up your account</Title>
                        <TitleDescription>Select the cryptocurrency in which the top-up will be done</TitleDescription>
                    </SideTop>
                    <SideBot>
                        <AmountSelect>
                            {options.map((opt) => (
                                <AmountToggle
                                    key={opt}
                                    active={isOptionActive(opt)}
                                    onClick={selectOption(opt)}
                                    inactiveColor={lightBlue}
                                    height="36px"
                                    justify="center"
                                >
                                    <div style={{ textAlign: "center" }}>
                                        <OptionValue>{opt}</OptionValue>
                                    </div>
                                </AmountToggle>
                            ))}
                        </AmountSelect>
                        {isLightningAvailable(payment.paymentCurrency) && (
                            <LightningCheckbox checked={payment.lightningNetwork} onChange={setUseLightning}>
                                Use lightning network
                            </LightningCheckbox>
                        )}
                        {payment.paymentCurrency == Currency.MYST && (
                            <Paragraph style={{ color: "red" }}>
                                <FontAwesomeIcon icon={faExclamationTriangle} style={{ marginRight: 5 }} />
                                {Currency.MYST} is currently only supported on the Ethereum network!
                            </Paragraph>
                        )}
                        <BrandButton
                            style={{ marginTop: "auto" }}
                            onClick={handleNextClick}
                            loading={loading}
                            disabled={loading || !payment.paymentCurrency}
                        >
                            Next
                        </BrandButton>
                    </SideBot>
                </ViewSidebar>
                <ViewContent>
                    <div style={{ paddingTop: 100 }}>
                        <CryptoAnimation currency={payment.paymentCurrency} />
                    </div>
                </ViewContent>
            </ViewSplit>
        </ViewContainer>
    )
})