react-icons/fa#FaUserCircle TypeScript Examples

The following examples show how to use react-icons/fa#FaUserCircle. 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: MobileSettings.tsx From hub with Apache License 2.0
4 votes
MobileSettings = (props: Props) => {
  const { ctx } = useContext(AppCtx);
  const [openSideBarStatus, setOpenSideBarStatus] = useState(false);

  const getSidebarIcon = (): JSX.Element => {
    if (ctx.user) {
      if (ctx.user.profileImageId) {
        return (
          <Image
            imageId={ctx.user.profileImageId}
            alt="User profile"
            className={`rounded-circle mw-100 mh-100 h-auto border border-2 ${styles.profileImage}`}
            placeholderIcon={<FaUserCircle />}
          />
        );
      } else {
        return <FaUserCircle />;
      }
    } else {
      return <GoThreeBars />;
    }
  };

  return (
    <div className={`btn-group navbar-toggler pe-0 ms-auto border-0 fs-6 bg-transparent ${styles.navbarToggler}`}>
      {isUndefined(ctx.user) ? (
        <div className="spinner-grow spinner-grow-sm textLight pt-2" role="status">
          <span className="visually-hidden">Loading...</span>
        </div>
      ) : (
        <Sidebar
          label="User settings"
          className="d-inline-block d-lg-none"
          buttonType="position-relative btn text-secondary pe-0 ps-3"
          buttonIcon={
            <div
              className={classnames(
                'rounded-circle d-flex align-items-center justify-content-center lh-1 fs-3 bg-white',
                styles.iconWrapper
              )}
            >
              {getSidebarIcon()}
            </div>
          }
          direction="right"
          header={
            <>
              {!isNull(ctx.user) && (
                <div className="h6 mb-0 text-dark flex-grow-1">
                  Signed in as <span className="fw-bold">{ctx.user.alias}</span>
                </div>
              )}
            </>
          }
          open={openSideBarStatus}
          onOpenStatusChange={(status: boolean) => setOpenSideBarStatus(status)}
        >
          <>
            {!isUndefined(ctx.user) && (
              <>
                {!isNull(ctx.user) ? (
                  <>
                    <ThemeMode device="mobile" onSelection={() => setOpenSideBarStatus(false)} />

                    <div className="dropdown-divider my-3" />

                    <Link
                      className="dropdown-item my-2"
                      onClick={() => {
                        setOpenSideBarStatus(false);
                      }}
                      to={{
                        pathname: '/stats',
                      }}
                    >
                      <div className="d-flex align-items-center">
                        <HiChartSquareBar className="me-2" />
                        <div>Stats</div>
                      </div>
                    </Link>

                    <Link
                      className="dropdown-item my-2"
                      to={{
                        pathname: '/packages/starred',
                      }}
                      onClick={() => setOpenSideBarStatus(false)}
                    >
                      <div className="d-flex align-items-center">
                        <FaStar className="me-2" />
                        <div>Starred packages</div>
                      </div>
                    </Link>

                    <Link
                      className="dropdown-item my-2"
                      to={{
                        pathname: '/control-panel',
                      }}
                      onClick={() => setOpenSideBarStatus(false)}
                    >
                      <div className="d-flex align-items-center">
                        <FaCog className="me-2" />
                        <div>Control Panel</div>
                      </div>
                    </Link>

                    <LogOut
                      className="my-2"
                      onSuccess={() => setOpenSideBarStatus(false)}
                      privateRoute={props.privateRoute}
                    />
                  </>
                ) : (
                  <>
                    <ThemeMode device="mobile" onSelection={() => setOpenSideBarStatus(false)} />

                    <div className="dropdown-divider my-3" />

                    <Link
                      className="dropdown-item my-2"
                      onClick={() => {
                        setOpenSideBarStatus(false);
                      }}
                      to={{
                        pathname: '/stats',
                      }}
                    >
                      <div className="d-flex align-items-center">
                        <HiChartSquareBar className="me-2" />
                        <div>Stats</div>
                      </div>
                    </Link>

                    <button
                      className="dropdown-item my-2"
                      onClick={() => {
                        setOpenSideBarStatus(false);
                        props.setOpenLogIn(true);
                      }}
                      aria-label="Open sign in modal"
                    >
                      <div className="d-flex align-items-center">
                        <FaSignInAlt className="me-2" />
                        <div>Sign in</div>
                      </div>
                    </button>

                    <button
                      className="dropdown-item my-2"
                      onClick={() => {
                        setOpenSideBarStatus(false);
                        props.setOpenSignUp(true);
                      }}
                      aria-label="Open sign up modal"
                    >
                      <div className="d-flex align-items-center">
                        <FaEdit className="me-2" />
                        <div>Sign up</div>
                      </div>
                    </button>
                  </>
                )}
              </>
            )}
          </>
        </Sidebar>
      )}
    </div>
  );
}