react-icons/fa#FaUsers TypeScript Examples

SideMenuItems: (MenuItem | GroupedMenuItem)[] = [
  new MenuItem(
    Pages.Accounts,
    'Accounts',
    <IoMdKey fontSize={SideMenuIconSize} />
  ),
  new MenuItem(
    Pages.Faucet,
    'Faucet',
    <IoIosWater fontSize={SideMenuIconSize} />,
    false,
    FaucetAsterix
  ),
  new MenuItem(
    Pages.DeployContracts,
    'Deploy Contract',
    <IoMdRocket fontSize={SideMenuIconSize} />
  ),
  // new MenuItem(
  //   Pages.Explorer,
  //   'Explorer',
  //   <FaMapMarkedAlt fontSize={SideMenuIconSize} />
  // ),
  new MenuItem(Pages.Blocks, 'Blocks', <FiGrid fontSize={SideMenuIconSize} />),
  new MenuItem(
    Pages.Deploys,
    'Deploys',
    <FaListUl fontSize={SideMenuIconSize} />
  ),
  new MenuItem(
    Pages.Search,
    'Search',
    <FaSearch fontSize={SideMenuIconSize} />
  ),
  new MenuItem(
    Pages.Validators,
    'Validators',
    <FaUsers fontSize={SideMenuIconSize} />
  ),
  new MenuItem(
    Pages.ConnectedPeers,
    'Connected Peers',
    <FaNetworkWired fontSize={SideMenuIconSize} />
  )
  // new GroupedMenuItem(
  //   'clarityContracts',
  //   'Contracts',
  //   <FaFileContract fontSize={SideMenuIconSize} />,
  //   [new MenuItem(Pages.Vesting, 'Vesting')]
  // )
]

RoomLink: React.FC<IRoomLink> = ({
  name,
  id,
  isSelected,
  onInviteMemberClick,
}) => {
  const { dispatch } = useModalContext();
  const [deleteRoom, { loading: isDeleting }] = useDeleteRoomMutation({
    onError(err) {
      console.log(err.message);
    },
    refetchQueries: [{ query: ListCurrentUserRoomsDocument }],
  });

  const handleDelete = () => {
    deleteRoom({
      variables: {
        roomId: id,
      },
    }).catch(console.log);
  };

  const handleAddMembers = () => {
    dispatch({ type: "OPEN", modal: "InviteMembers" });
    onInviteMemberClick(id);
  };

  return (
    <StyledRoomLink isSelected={isSelected}>
      <Flex align="center" justify="space-between" nowrap>
        <Link to={`/room/${id}`}>
          <Flex gap="medium" align="center" nowrap>
            <FaUsers />
            <span>{name}</span>
          </Flex>
        </Link>

        <Dropdown>
          <Dropdown.Toggle>
            <IconButton icon={<FiMoreVertical />} />
          </Dropdown.Toggle>
          <Dropdown.Content style={{ right: "initial" }}>
            <Dropdown.Item>
              <Button
                variant="secondary"
                onClick={handleAddMembers}
                icon={FaUserPlus}
              >
                Add Members
              </Button>
            </Dropdown.Item>
            <Dropdown.Item>
              <Button
                variant="danger"
                isLoading={isDeleting}
                onClick={handleDelete}
                icon={FaTrash}
              >
                Delete
              </Button>
            </Dropdown.Item>
          </Dropdown.Content>
        </Dropdown>
      </Flex>
    </StyledRoomLink>
  );
}

CreateRoom: React.FC = () => {
  const { state, dispatch } = useModalContext();
  const { register, handleSubmit, errors: formErrors } = useForm<Inputs>();

  const [createRoom, { loading }] = useCreateRoomMutation({
    refetchQueries: [{ query: ListCurrentUserRoomsDocument }],
  });

  const closeModal = () => {
    dispatch({ type: "CLOSE", modal: "CreateRoom" });
  };

  const onSubmit = async (data: Inputs) => {
    try {
      await createRoom({
        variables: {
          name: data.roomName,
        },
      });
      closeModal();
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <Modal
      isOpen={state.isCreateRoomModalOpen}
      closeTimeoutMS={300}
      onRequestClose={closeModal}
      contentLabel="Create New Room"
      className="ModalContent"
      overlayClassName="ModalOverlay"
    >
      <h2>Create New Room</h2>
      <small className="textcolor--gray">Give it a cool name</small>
      <Spacer gap="xlarge" />

      <form onSubmit={handleSubmit(onSubmit)}>
        <Input
          type="text"
          name="roomName"
          label="Room Name"
          placeholder="Anurag's room"
          icon={FaUsers}
          errors={formErrors}
          inputRef={register({ required: "Room name is required" })}
        />

        <ButtonGroup gap="medium" float="right">
          <Button onClick={closeModal} variant="danger" icon={FaTimes}>
            Cancel
          </Button>
          <Button isLoading={loading} icon={FaUsers}>
            Create room
          </Button>
        </ButtonGroup>
      </form>
    </Modal>
  );
}

SideMenuItems: (MenuItem | GroupedMenuItem)[] = [
  new MenuItem(
    Pages.Accounts,
    'Accounts',
    <IoMdKey fontSize={SideMenuIconSize} />
  ),
  faucetMenuItem,
  new MenuItem(
    Pages.DeployContracts,
    'Deploy Contract',
    <IoMdRocket fontSize={SideMenuIconSize} />
  ),
  // new MenuItem(
  //   Pages.Explorer,
  //   'Explorer',
  //   <FaMapMarkedAlt fontSize={SideMenuIconSize} />
  // ),
  new MenuItem(Pages.Blocks, 'Blocks', <FiGrid fontSize={SideMenuIconSize} />),
  new MenuItem(
    Pages.Deploys,
    'Deploys',
    <FaListUl fontSize={SideMenuIconSize} />
  ),
  new MenuItem(
    Pages.Search,
    'Search',
    <FaSearch fontSize={SideMenuIconSize} />
  ),
  new MenuItem(
    Pages.Validators,
    'Validators',
    <FaUsers fontSize={SideMenuIconSize} />
  ),
  new MenuItem(
    Pages.ConnectedPeers,
    'Connected Peers',
    <FaNetworkWired fontSize={SideMenuIconSize} />
  )
  // new GroupedMenuItem(
  //   'clarityContracts',
  //   'Contracts',
  //   <FaFileContract fontSize={SideMenuIconSize} />,
  //   [new MenuItem(Pages.Vesting, 'Vesting')]
  // )
]

export function SideNavbar(props: any) {
  const [login, setLogin] = useState('')
  const [myChannelLink, setMyChannelLink] = useState('')

  useEffect(() => {
    const load = async () => {
      const login = localStorage.getItem('SNProfileID')

      if (login) {
        const user = (await AccountService.getAccount(login)) as any

        const ringItem = user.keyring[0]
        setLogin(user.nickname)
        setMyChannelLink(`${ringItem.type}:${ringItem.username}`)
      }
    }

    void load()
  }, [])

  const logOut = async () => {
    //TODO: logout logic

    const profileID = localStorage.getItem('SNProfileID')

    const user = await AccountService.logout(profileID)
    const accountsInit = (await AccountService.getAccounts()) as any
    localStorage.removeItem('SNProfileID')
    console.log(accountsInit)
    if (accountsInit.length > 0) {
      localStorage.setItem('SNProfileID', accountsInit[0]._id)
    }
    window.location.reload()
  }

  return (
    <Navbar bg="white" expand="lg" id="layoutNav" className="bg_white fixed-left">
      <Navbar.Brand>
        <img src={SpeakLogo} />
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav">
        <span className="navbar-toggler-icon"></span>
      </Navbar.Toggle>
      <Navbar.Collapse>
        <Nav className="mr-auto nav_dist">
          {login && (
            <NavDropdown
              id="nav-dropdown"
              title={
                <>
                  <div className="nav_icons">
                    <VscKey size="21px" />
                  </div>
                  <span>@{login}</span>
                </>
              }
            >
              <NavDropdown.Item href="#/accounts">Switch account</NavDropdown.Item>
              <NavDropdown.Item href={`#/user/${myChannelLink}`}>Go to my channel</NavDropdown.Item>
              <NavDropdown.Item href="#/login">Add account</NavDropdown.Item>
              {login && (
                <NavDropdown.Item
                  onClick={() => {
                    logOut()
                  }}
                >
                  Log out
                </NavDropdown.Item>
              )}
            </NavDropdown>
          )}
          {!login && (
            <Nav.Link href="#/login" className="display-mobile">
              <button className="btn btn-dark text-white btn-sm">Add account</button>
            </Nav.Link>
          )}
          <hr />
          <Nav.Link href="#/">
            <div className="nav_icons">
              <img src={iconHome} height="14px" />
            </div>
            Home
          </Nav.Link>
          <Nav.Item></Nav.Item>
          <Nav.Link href="#/trends">
            <div className="nav_icons">
              <img src={iconTrend} height="21px" />
            </div>
            Trending Content
          </Nav.Link>
          <Nav.Link href="#/new">
            <div className="nav_icons">
              <img src={iconNewContent} height="17px" />
            </div>
            New Content
          </Nav.Link>

          <NavDropdown
            id="nav-dropdown"
            title={
              <>
                <div className="nav_icons">
                  <img src={shakeHands} style={{ height: '21px' }} />
                </div>
                Communities
              </>
            }
          >
            <Nav.Link href="#/communities">
              <FaGlobe /> All Communities...
            </Nav.Link>
            <NavDropdown.Item href="#/community/hive:hive-181335">
              <FaUsers /> Threespeak
            </NavDropdown.Item>
            <NavDropdown.Item href="#/community/hive:hive-153014">
              <FaUsers /> Citizen Journalists
            </NavDropdown.Item>

            <NavDropdown.Item href="#/community/hive:hive-112355">
              <FaUsers /> Threeshorts
            </NavDropdown.Item>
            <NavDropdown.Item href="#/community/hive:hive-129768">
              <FaUsers />
              &nbsp;Coronavirus Pandemic
            </NavDropdown.Item>
            <NavDropdown.Item href="#/community/hive:hive-196427">
              <FaUsers /> &nbsp;COVID-19
            </NavDropdown.Item>
          </NavDropdown>
          <Nav.Link href="#/leaderboard">
            <div className="nav_icons">
              <img src={iconLeaderboard} height="12px" />
            </div>
            Leaderboard
          </Nav.Link>
          <Nav.Link href="#/newcomers">
            <div className="nav_icons">
              <img src={iconNewcomer} height="19px" />
            </div>
            First Uploads
          </Nav.Link>
          <Nav.Link href="#/uploader">
            <div className="nav_icons">
              <FaToolbox />
            </div>
            Uploader
          </Nav.Link>
          <Nav.Link href="#/creatorstudio">
            <div className="nav_icons">
              <FaToolbox />
            </div>
            Creator Studio
          </Nav.Link>
          <NavDropdown
            id="nav-dropdown"
            title={
              <>
                <div className="nav_icons">
                  <BsFillGearFill style={{ height: '21px' }} />
                </div>
                Settings
              </>
            }
          >
            <Nav.Link href="#/blocklist">
              <FaGlobe /> Blocklist
            </Nav.Link>
            <Nav.Link href="#/pins">
              <FaGlobe /> Pins
            </Nav.Link>
            <Nav.Link href="#/ipfsconsole">
              <FaGlobe /> Ipfs Console
            </Nav.Link>
          </NavDropdown>
        </Nav>

        <Nav>
          <li className="nav-item">
            <div className="pad_l">
              <h5>3Speak</h5>
            </div>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://3speak.co/intl/about_us">
              About us
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://3speak.co/intl/about_us">
              FAQ
            </a>
          </li>

          <li className="nav-item text-center">
            <a
              className=""
              target="_blank"
              href="https://twitter.com/3speakonline?utm_source=3speak.co"
            >
              <FaTwitter size={28} />
            </a>
            <a className="ml-2" target="_blank" href="https://t.me/threespeak?utm_source=3speak.co">
              <FaTelegram size={28} />
            </a>
            <a
              className="ml-2"
              target="_blank"
              href="https://discord.me/3speak?utm_source=3speak.co"
            >
              <i className="fab fa-discord text-muted fa-2x"></i>
              <FaDiscord size={28} />
            </a>
            <a
              className="ml-2"
              target="_blank"
              title="Visit Our Blog"
              href="https://hive.blog/@threespeak"
            >
              <img
                style={{ width: '32px', marginTop: '-15px', color: 'black' }}
                src={iconBlog}
                alt=""
              />
            </a>
          </li>

          <Dropdown title="Find us" className="nav-item dropdown mt-2 display-mobile">
            <Dropdown.Toggle
              className="btn btn-secondary btn-sm dropdown-toggle"
              variant="secondary"
              data-toggle="dropdown"
              aria-haspopup="true"
            >
              Find us
            </Dropdown.Toggle>
            <Dropdown.Menu>
              <a className="dropdown-item" href="https://t.me/threespeak?utm_source=3speak.co">
                Telegram
              </a>
              <a className="dropdown-item" href="https://discord.me/3speak?utm_source=3speak.co">
                Discord
              </a>
              <a
                className="dropdown-item"
                target="_blank"
                href="https://twitter.com/3speakonline?utm_source=3speak.co"
              >
                Twitter
              </a>
            </Dropdown.Menu>
          </Dropdown>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  )
}