react-icons/fa#FaMapMarkedAlt TypeScript Examples

The following examples show how to use react-icons/fa#FaMapMarkedAlt. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: App.tsx From clarity with Apache License 2.0

4 votes

render() {
    return (
      <nav
        className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"
        id="mainNav"
      >
        <a className="navbar-brand" href="/">
          <img src={logo} alt="logo" />
          <span className={'navbar-brand-title'}>
            Clarity Explorer <FaMapMarkedAlt className={'navbar-brand-icon'} />
          </span>
        </a>
        <div className="navbar-network-info d-none d-md-inline-block">
          <p>
            Connected to:&nbsp;
            <span className={'navbar-network-highlight'}>
              {window.config?.network?.name}&nbsp;
            </span>
            Block Height:&nbsp;
            <span className={'navbar-network-highlight'}>
              {this.props.networkInfoContainer.blockHeight}&nbsp;
            </span>
          </p>
          <p>
            Block Hash:&nbsp;
            <span className={'navbar-network-highlight'}>
              {this.props.networkInfoContainer.blockHash || 'null'}&nbsp;
            </span>
          </p>
        </div>
        <button
          className="navbar-toggler navbar-toggler-right"
          type="button"
          data-toggle="collapse"
          data-target="#navbarResponsive"
          aria-controls="navbarResponsive"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>

        <div className="collapse navbar-collapse" id="navbarResponsive">
          {/* Side Bar */}
          <ul className="navbar-nav navbar-sidenav" id="sideMenu">
            {SideMenuItems.map(x => x.toRoute())}
          </ul>

          {/* Side Bar Toggle */}
          <ul className="navbar-nav sidenav-toggler">
            <li className="nav-item">
              <a className="nav-link text-center" id="sidenavToggler">
                <i className="fa fa-fw fa-angle-left"></i>
              </a>
            </li>
          </ul>

          <ul className="navbar-nav ml-auto">
            <li className="nav-item">
              {this.props.auth.user && (
                <div className="username text-white">
                  <span className="welcome">Welcome</span>
                  {this.props!.auth!.user!.name}
                </div>
              )}
            </li>
            <li className="nav-item">
              {this.props.auth.user ? (
                <a
                  className="nav-link text-white"
                  onClick={_ => this.props.auth.logout()}
                >
                  <FiLogOut /> Sign Out
                </a>
              ) : (
                <a
                  className="nav-link text-center"
                  onClick={_ => this.props.auth.login()}
                >
                  <i className="fa fa-fw fa-sign-in-alt"></i>Sign In
                </a>
              )}
            </li>
            <li
              className="nav-item"
              style={{ paddingLeft: '1rem', paddingTop: '.3rem' }}
            >
              <ConnectButton auth={this.props.auth} />
            </li>
          </ul>
        </div>
      </nav>
    );
  }

Example #2

Source File: App.tsx From casper-clarity with Apache License 2.0

4 votes

render() {
    return (
      <nav
        className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"
        id="mainNav"
      >
        <a className="navbar-brand" href="/">
          <img src={logo} alt="logo" />
          <span className={'navbar-brand-title'}>
            Clarity Explorer <FaMapMarkedAlt className={'navbar-brand-icon'} />
          </span>
        </a>
        <div className="navbar-network-info d-none d-md-inline-block">
          <p>
            Connected to:&nbsp;
            <span className={'navbar-network-highlight'}>
              {window.config?.network?.name}&nbsp;
            </span>
            Block Height:&nbsp;
            <span className={'navbar-network-highlight'}>
              {this.props.networkInfoContainer.blockHeight}&nbsp;
            </span>
          </p>
          <p>
            Block Hash:&nbsp;
            <span className={'navbar-network-highlight'}>
              {this.props.networkInfoContainer.blockHash || 'null'}&nbsp;
            </span>
          </p>
        </div>
        <button
          className="navbar-toggler navbar-toggler-right"
          type="button"
          data-toggle="collapse"
          data-target="#navbarResponsive"
          aria-controls="navbarResponsive"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>

        <div className="collapse navbar-collapse" id="navbarResponsive">
          {/* Side Bar */}
          <ul className="navbar-nav navbar-sidenav" id="sideMenu">
            {SideMenuItems.map(x => x.toRoute())}
          </ul>

          {/* Side Bar Toggle */}
          <ul className="navbar-nav sidenav-toggler">
            <li className="nav-item">
              <a
                className="nav-link text-center"
                id="sidenavToggler"
                href={'/#'}
              >
                <i className="fa fa-fw fa-angle-left"></i>
              </a>
            </li>
          </ul>

          <ul className="navbar-nav ml-auto">
            <li className="nav-item">
              {this.props.auth.user && (
                <div className="username text-white">
                  <span className="welcome">Welcome</span>
                  {this.props!.auth!.user!.name}
                </div>
              )}
            </li>
            <li className="nav-item">
              {this.props.auth.user ? (
                <a
                  href={'/#'}
                  className="nav-link text-white"
                  onClick={_ => this.props.auth.logout()}
                >
                  <FiLogOut /> Sign Out
                </a>
              ) : (
                <a
                  href={'/#'}
                  className="nav-link text-center"
                  onClick={_ => this.props.auth.login()}
                >
                  <i className="fa fa-fw fa-sign-in-alt"></i>Sign In
                </a>
              )}
            </li>
            <li
              className="nav-item"
              style={{ paddingLeft: '1rem', paddingTop: '.3rem' }}
            >
              <ConnectButton auth={this.props.auth} />
            </li>
          </ul>
        </div>
      </nav>
    );
  }