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

The following examples show how to use @fortawesome/free-solid-svg-icons#faUserFriends. 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: InitialTopup.tsx    From mysterium-vpn-desktop with MIT License 5 votes vote down vote up 
InitialTopup: React.FC = observer(function InitialTopup() {
    const { payment, onboarding } = useStores()
    const handleTopupNow = async () => {
        return payment.startTopupFlow(locations.onboardingWalletTopup)
    }
    const [referralPrompt, setReferralPrompt] = useState(false)
    const handleUseReferralCode = () => {
        setReferralPrompt(true)
    }
    const handleReferralSubmit = async ({ code }: ReferralCodeFormFields) => {
        setReferralPrompt(false)
        await onboarding.registerWithReferralCode(code)
    }
    const handleReferralCancel = () => {
        setReferralPrompt(false)
    }
    return (
        <ViewContainer>
            <ViewNavBar />
            <ViewSplit>
                <ViewSidebar>
                    <SideTop>
                        <SectionIcon icon={faWallet} />
                        <Title>Your Wallet</Title>
                        <Small>Top up your wallet now to complete the registration</Small>
                    </SideTop>
                    <SideBot>
                        <PrimarySidebarActionButton onClick={handleTopupNow}>
                            <ButtonContent>
                                <ButtonIcon>
                                    <FontAwesomeIcon icon={faWallet} />
                                </ButtonIcon>
                                Top up now
                            </ButtonContent>
                        </PrimarySidebarActionButton>
                        <SecondarySidebarActionButton onClick={handleUseReferralCode}>
                            <ButtonContent>
                                <ButtonIcon>
                                    <FontAwesomeIcon icon={faUserFriends} />
                                </ButtonIcon>
                                Use a Referral code
                            </ButtonContent>
                        </SecondarySidebarActionButton>
                    </SideBot>
                </ViewSidebar>
                <Content>
                    <Lottie
                        play
                        loop={false}
                        animationData={animationOnboardingTopup}
                        style={{ width: 256, height: 256 }}
                        renderer="svg"
                    />
                </Content>
                <UseReferralCodePrompt
                    visible={referralPrompt}
                    onSubmit={handleReferralSubmit}
                    onCancel={handleReferralCancel}
                />
            </ViewSplit>
        </ViewContainer>
    )
})
Example #2
Source File: RoomPage.tsx    From livekit-react with Apache License 2.0 4 votes vote down vote up 
RoomPage = () => {
  const [numParticipants, setNumParticipants] = useState(0);
  const [displayOptions, setDisplayOptions] = useState<DisplayOptions>({
    stageLayout: 'grid',
    showStats: false,
  });
  const navigate = useNavigate();
  const query = new URLSearchParams(useLocation().search);
  const url = query.get('url');
  const token = query.get('token');
  const recorder = query.get('recorder');

  if (!url || !token) {
    return <div>url and token are required</div>;
  }

  const onLeave = () => {
    navigate('/');
  };

  const updateParticipantSize = (room: Room) => {
    setNumParticipants(room.participants.size + 1);
  };

  const onParticipantDisconnected = (room: Room) => {
    updateParticipantSize(room);

    /* Special rule for recorder */
    if (recorder && parseInt(recorder, 10) === 1 && room.participants.size === 0) {
      console.log('END_RECORDING');
    }
  };

  const updateOptions = (options: DisplayOptions) => {
    setDisplayOptions({
      ...displayOptions,
      ...options,
    });
  };

  return (
    <DisplayContext.Provider value={displayOptions}>
      <div className="roomContainer">
        <div className="topBar">
          <h2>LiveKit Video</h2>
          <div className="right">
            <div>
              <input
                id="showStats"
                type="checkbox"
                onChange={(e) => updateOptions({ showStats: e.target.checked })}
              />
              <label htmlFor="showStats">Show Stats</label>
            </div>
            <div>
              <button
                className="iconButton"
                disabled={displayOptions.stageLayout === 'grid'}
                onClick={() => {
                  updateOptions({ stageLayout: 'grid' });
                }}
              >
                <FontAwesomeIcon height={32} icon={faThLarge} />
              </button>
              <button
                className="iconButton"
                disabled={displayOptions.stageLayout === 'speaker'}
                onClick={() => {
                  updateOptions({ stageLayout: 'speaker' });
                }}
              >
                <FontAwesomeIcon height={32} icon={faSquare} />
              </button>
            </div>
            <div className="participantCount">
              <FontAwesomeIcon icon={faUserFriends} />
              <span>{numParticipants}</span>
            </div>
          </div>
        </div>
        <LiveKitRoom
          url={url}
          token={token}
          onConnected={(room) => {
            setLogLevel('debug');
            onConnected(room, query);
            room.on(RoomEvent.ParticipantConnected, () => updateParticipantSize(room));
            room.on(RoomEvent.ParticipantDisconnected, () => onParticipantDisconnected(room));
            updateParticipantSize(room);
          }}
          roomOptions={{
            adaptiveStream: isSet(query, 'adaptiveStream'),
            dynacast: isSet(query, 'dynacast'),
            videoCaptureDefaults: {
              resolution: VideoPresets.h720.resolution,
            },
          }}
          onLeave={onLeave}
        />
      </div>
    </DisplayContext.Provider>
  );
}