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

export default function handleTeamSection(
    region: Region,
    sections: FuncDescriptorSections,
    func: Func.BasicFunc,
    dataVal: DataVal.DataVal
): void {
    const section = sections.team,
        parts = section.parts;

    if (func.funcTargetTeam === Func.FuncTargetTeam.PLAYER)
        parts.push(<FontAwesomeIcon icon={faUser} title="Can be applied to player-controlled servants" />);
    else if (func.funcTargetTeam === Func.FuncTargetTeam.ENEMY)
        parts.push(<FontAwesomeIcon icon={faDragon} title="Can be applied to computer-controlled opponents" />);
    else section.showing = false;
}

// 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
);

ProfileMenu = observer(function ProfileMenu() {
  const { userStore } = useStores();
  const { user } = userStore;

  return (
    <div className="absolute border w-48 mt-2 bg-gray-100 transform translate-x-3/4 rounded-lg p-3">
      {user ? (
        <>
          <Link href="/profile">
            <a className="flex items-center">
              <FontAwesomeIcon icon={faUser} className="w-4 inline mr-2" />{" "}
              פרופיל
            </a>
          </Link>
          <div
            className="cursor-pointer"
            onClick={() => {
              userStore.logout();
            }}
          >
            <FontAwesomeIcon icon={faSignOutAlt} className="w-4 inline mr-2" />
            התנתק
          </div>
        </>
      ) : (
        <>
          <div>
            <Link href="/login">התחברות</Link>
          </div>
          <div>
            <Link href="/register">הרשמה</Link>
          </div>
        </>
      )}
    </div>
  );
})

library.add(faHome, faLock, faUser, faEnvelope, faPaperPlane, faEye, faEyeSlash);

SideBarMenus = () => {
  const [showRegister, setShowRegister] = useState(false);
  const [showLogin, setShowLogin] = useState(false);
  const [showLogout, setShowLogout] = useState(false);
  const user = useSelector((state: AppState) => state.user);

  const onClickToggleRegister = () => {
    setShowRegister(!showRegister);
  };

  const onClickToggleLogin = () => {
    setShowLogin(!showLogin);
  };

  const onClickToggleLogout = () => {
    setShowLogout(!showLogout);
  };

  return (
    <React.Fragment>
      <ul>
        <li>
          <FontAwesomeIcon icon={faUser} />
          <span className="menu-name">
            <Link to={`/userprofile/${user?.id}`}>{user?.userName}</Link>
          </span>
        </li>
        <li>
          <FontAwesomeIcon icon={faRegistered} />
          <span onClick={onClickToggleRegister} className="menu-name">
            register
          </span>
          <Registration
            isOpen={showRegister}
            onClickToggle={onClickToggleRegister}
          />
        </li>
        <li>
          <FontAwesomeIcon icon={faSignInAlt} />
          <span onClick={onClickToggleLogin} className="menu-name">
            login
          </span>
          <Login isOpen={showLogin} onClickToggle={onClickToggleLogin} />
        </li>
        <li>
          <FontAwesomeIcon icon={faSignOutAlt} />
          <span onClick={onClickToggleLogout} className="menu-name">
            logout
          </span>
          <Logout isOpen={showLogout} onClickToggle={onClickToggleLogout} />
        </li>
      </ul>
    </React.Fragment>
  );
}

SideBarMenus = () => {
  const [showRegister, setShowRegister] = useState(false);
  const [showLogin, setShowLogin] = useState(false);
  const [showLogout, setShowLogout] = useState(false);
  const user = useSelector((state: AppState) => state.user);

  useEffect(() => {
    console.log("SideBar user", user);
  }, [user]);

  const onClickToggleRegister = () => {
    setShowRegister(!showRegister);
  };

  const onClickToggleLogin = () => {
    setShowLogin(!showLogin);
  };

  const onClickToggleLogout = () => {
    setShowLogout(!showLogout);
  };

  return (
    <React.Fragment>
      <ul>
        {user ? (
          <li>
            <FontAwesomeIcon icon={faUser} />
            <span className="menu-name">
              <Link to={`/userprofile/${user?.id}`}>{user?.userName}</Link>
            </span>
          </li>
        ) : null}

        {user ? null : (
          <li>
            <FontAwesomeIcon icon={faRegistered} />
            <span onClick={onClickToggleRegister} className="menu-name">
              register
            </span>
            <Registration
              isOpen={showRegister}
              onClickToggle={onClickToggleRegister}
            />
          </li>
        )}

        {user ? null : (
          <li>
            <FontAwesomeIcon icon={faSignInAlt} />
            <span onClick={onClickToggleLogin} className="menu-name">
              login
            </span>
            <Login isOpen={showLogin} onClickToggle={onClickToggleLogin} />
          </li>
        )}

        {user ? (
          <li>
            <FontAwesomeIcon icon={faSignOutAlt} />
            <span onClick={onClickToggleLogout} className="menu-name">
              logout
            </span>
            <Logout isOpen={showLogout} onClickToggle={onClickToggleLogout} />
          </li>
        ) : null}
      </ul>
    </React.Fragment>
  );
}

NavbarUserDropdown: React.FC<NavbarUserDropdownProps> = ({
  username,
  onLogout
}) => {
  const [expanded, setExpanded] = useState(false);

  const onLogoutClick: React.MouseEventHandler<HTMLAnchorElement> = event => {
    event.preventDefault();
    onLogout();
  };

  return (
    <li className="usa-nav__primary-item">
      <button
        onClick={() => setExpanded(!expanded)}
        className={classNames("usa-accordion__button", "usa-nav__link", {
          "usa-current": expanded
        })}
        aria-expanded={expanded}
      >
        <FontAwesomeIcon className="margin-right-1" icon={faUser} />
        <span>{username}</span>
      </button>
      {expanded && (
        <ul className={classNames("usa-nav__submenu", classes.submenu)}>
          <li className="usa-nav__submenu-item">
            <NavLink to="/adminpage">
              <FontAwesomeIcon className="margin-right-1" icon={faCog} />
              Admin
            </NavLink>
          </li>
          <li className="usa-nav__submenu-item">
            <a href="/postlogout" onClick={onLogoutClick}>
              <FontAwesomeIcon className="margin-right-1" icon={faUserLock} />
              Logout
            </a>
          </li>
        </ul>
      )}
    </li>
  );
}

userIcon = faUser as IconProp;

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,
}

export default function Register() {
  const [email, setEmail] = useState('');
  const [nickname, setNickname] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(false);
  const [source, setSource] = useState('');

  useEffect(() => {
    ipcRenderer.on('avatar-data', (event, args) => {
      setSource(args.source);
    });
  }, []);

  const handleSelectAvatar = () => {
    Bridge.open(WidgetType.AVATAR);
  };

  const handleRegister = () => {
    if (email && nickname && password) {
      registerUser(source || defaultAvatar, email, nickname, password).then(res => {
        if (res.err) {
          setError(true);
        }
        history.push('/');
      });
    }
  };

  return (
    <div className={style.register}>
      <div className={style.avatar_wrapper}>
        <EditableAvatar size={100} src={source || defaultAvatar} onClick={handleSelectAvatar}/>
      </div>
      <div className={style.input_wrapper}>
        <div className={cls(style.input, style.email, error && style.error)}>
          <span>
            <FontAwesomeIcon icon={faInbox}/>
          </span>
          <input value={email} onChange={e => setEmail(e.target.value)} placeholder="email..."/>
        </div>
        <div className={cls(style.input, style.nickname)}>
          <span>
            <FontAwesomeIcon icon={faUser}/>
          </span>
          <input value={nickname} onChange={e => setNickname(e.target.value)} placeholder="nickname..."/>
        </div>
        <div className={cls(style.input, style.password)}>
          <span>
            <FontAwesomeIcon icon={faLock}/>
          </span>
          <input value={password} onChange={e => setPassword(e.target.value)} placeholder="password..."/>
        </div>
      </div>
      <div className={style.register_btn}>
        <button onClick={handleRegister}>
          Register
        </button>
      </div>
      <div className={style.login_btn}>
        <button onClick={() => history.push('/')}>
          <FontAwesomeIcon icon={faArrowLeft}/>
        </button>
      </div>
    </div>
  );
}

export default function PageHome() {
  const { t } = useTranslation("page_home")
  ReactGA.send({ hitType: "pageview", page: '/home' })
  return <Box my={1} display="flex" flexDirection="column" gap={1}>
    <CardDark>
      <CardContent>
        <Trans i18nKey="intro" t={t}>
          <Typography variant="h5" gutterBottom >
            What is Genshin Optimizer?
          </Typography>
          <Typography variant="body1" color="text.secondary" gutterBottom >
            Genshin Optimizer (GO) is an open-source fan-made website for the action-RPG gacha game <Link href="https://genshin.mihoyo.com/" target="_blank" rel="noreferrer"><strong>Genshin Impact</strong></Link>.
            It is mainly intended to help players with the complex aspect of the game: Artifact Optimization.
            Since artifacts are heavily RNG-based elements that directly contribute to how effective your characters are in the game, GO will try to find the best artifacts for your characters based on your current artifact inventory.
          </Typography>
          <Typography variant="body1" color="text.secondary" gutterBottom>
            GO can keep track of your artifacts, and allows more ease in filtering/comparing artifacts, it serves as a tool to help user find good artifacts in their inventory to level up, and bad artifacts to use as fodder.
          </Typography>
          <Typography variant="body1" color="text.secondary">
            Since GO can replicate the exact stats of any character, along with calculate all their damage numbers to up 1% accuracy, it can also serve as a Damage calculator, and a tool for theory crafting.
          </Typography>
        </Trans>
      </CardContent>
    </CardDark>
    <CardDark>
      <CardContent>
        <Trans i18nKey="notGO" t={t}>
          <Typography variant="h5" gutterBottom >
            What Genshin Optimizer is NOT:
          </Typography>
          <Typography variant="body1" color="text.secondary" gutterBottom >
            GO does NOT tell you how to play the game. The information/calculations are intended to be un-opinionated as possible.
          </Typography>
          <Typography variant="body1" color="text.secondary" gutterBottom>
            GO does NOT supplement your lack of in-game knowledge, inappropriate configuration of the optimizer can provide misleading results. Please research your characters, and figure out how you want to use them before configuring them on GO. Think of GO as more of a calculator.
          </Typography>
          <Typography variant="body1" color="text.secondary">
            GO does NOT generally take consideration of Energy Recharge, or team rotations. Please keep those mechanics in mind when you use this tool.
          </Typography>
        </Trans>
      </CardContent>
    </CardDark>
    <CardDark sx={{ width: "100%" }}  >
      <CardContent>
        <Typography variant="h5" gutterBottom>
          <Trans i18nKey="quickLinks.title" t={t}>
            Quick Links
          </Trans>
        </Typography>
        <CardLight sx={{ mb: 1, }}>
          <CardContent>
            <Typography variant="h6" gutterBottom>
              <Trans i18nKey="quickLinks.scannerTitle" t={t}>
                Do you want to automate some of the artifact input process?
              </Trans>
            </Typography>
            <Typography color="text.secondary" gutterBottom>
              <Trans i18nKey="quickLinks.scannerText" t={t}>
                Here is a list of compatible automatic scanners that can feed data into GO. These programs will automatically scan artifacts from your game, and exporting that data into a file. This file can then be imported to GO.
              </Trans>
            </Typography>
            <Button component={RouterLink} size="small" to="/scanner" variant="contained" startIcon={<Scanner />}>
              <Trans i18nKey="quickLinks.scannerBtn" t={t}>
                Scanner List
              </Trans>
            </Button>
          </CardContent>
        </CardLight>
        <CardLight>
          <CardContent>
            <Typography variant="body1" color="text.secondary" gutterBottom >
              <Trans i18nKey="quickLinks.goGithubText" t={t}>
                GO is completely open-source, written in TypeScript, with the <FontAwesomeIcon icon={faReact} />React framework.
              </Trans>
            </Typography>
            <Button size="small" variant="contained" component="a" href={process.env.REACT_APP_GITHUB_LINK} target="_blank" rel="noreferrer" startIcon={<FontAwesomeIcon icon={faGithub} />}>
              <Trans i18nKey="quickLinks.goGithubBtn" t={t}>
                Genshin Optimizer Github
              </Trans>
            </Button>
          </CardContent>
        </CardLight>
      </CardContent>
    </CardDark>
    <CardDark>
      <CardContent>
        <Typography variant="h5" gutterBottom>
          <Trans i18nKey="features.title" t={t}>
            Features
          </Trans>
        </Typography>
        <Grid container spacing={2}>
          {features.map((feature, i) => <Grid item xs={12} md={4} key={i}>
            <FeatureCard {...feature} t={t} />
          </Grid>)}
        </Grid>
      </CardContent>
    </CardDark>
    <CardDark>
      <Grid container>
        <Grid item xs={12} md={6}>
          <CardContent >
            <Trans i18nKey="helpDev" t={t}>
              <Typography variant="h5" gutterBottom >
                Want to help the developer?
              </Typography>
              <Typography variant="body1" color="text.secondary" gutterBottom >
                If you want to financially support the developer, please consider donating via <ABtn href={process.env.REACT_APP_PAYPAL_LINK} icon={<FontAwesomeIcon icon={faPaypal} />}>Paypal</ABtn> or <ABtn href={process.env.REACT_APP_PATREON_LINK} icon={<FontAwesomeIcon icon={faPatreon} />}>Patreon</ABtn>
                . GO does not host ads, and will not lock any features behind a paywall.
              </Typography>
              <Typography variant="body1" color="text.secondary" gutterBottom >
                If you want to help with localization/translation of GO to your native language, request a feature or report a bug, join our <ABtn href={process.env.REACT_APP_DISCORD_LINK} icon={<FontAwesomeIcon icon={faDiscord} />}>discord</ABtn>. This is where you will find more GO-related information, and checkout what is being actively worked on.
              </Typography>
              <Typography variant="body1" color="text.secondary" gutterBottom >
                You can also join the <ABtn href={process.env.REACT_APP_DEVDISCORD_LINK} icon={<FontAwesomeIcon icon={faDiscord} />}>Genshin Dev discord</ABtn> if you are interested in creating Genshin apps.
              </Typography>
            </Trans>
          </CardContent>
        </Grid>
        <Grid item xs={12} md={6}>
          <CardContent sx={{ width: "100%", height: "100%", minHeight: 300 }}>
            <iframe src={process.env.REACT_APP_DISCORD_EMBED_LINK} width="100%" height="100%" frameBorder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts" title="discordFrame"></iframe>
          </CardContent>
        </Grid>
      </Grid>
    </CardDark>
    <CardDark>
      <CardContent>
        <Trans i18nKey="credits" t={t}>
          <Typography variant="h5" gutterBottom >
            Credit where credit is due
          </Typography>
          <Typography variant="body1" color="text.secondary" gutterBottom >
            GO is the culmination of hundreds of hours of programming/designing by two maintainers, <ABtn href={process.env.REACT_APP_FRZYC_LINK} icon={<FontAwesomeIcon icon={faUser} />}><strong> frzyc</strong></ABtn> and <ABtn href={process.env.REACT_APP_LANTUA_LINK} icon={<FontAwesomeIcon icon={faUser} />}><strong> lantua</strong></ABtn>. There are also a ton of other resources that aid in the creation of this website. Time to take a bow and thank them.
          </Typography>
          <Typography component="div" variant="body1" color="text.secondary" >
            <ul>
              <li>Thanks to everyone in the community, and especially people on our <Link href={process.env.REACT_APP_DISCORD_LINK} target="_blank" rel="noreferrer">discord</Link> for providing feedback and helping us improve this tool.</li>
              <li>Thanks to <Link href="https://github.com/Dimbreath" target="_blank" rel="noreferrer">Dimbreath</Link>, for giving us a reliable, consistent source for Genshin data and numbers. All our calculations would be moot without them.</li>
              <li>Special thanks to members of our community who has gone the extra mile, and has been helping us with localization/translation of GO to other languages, help us test formulas by recording in-game data, and programmers who has helped us with source code contributions.</li>
              <li>Thanks for everyone else, for sharing this tool, and getting more people to use this tool.</li>
              <li>Lastly, and most importantly, thank <strong>YOU</strong>, for using GO right now.</li>
            </ul>
          </Typography>
        </Trans>
      </CardContent>
    </CardDark>
  </Box>
}

export default function ScreenDashboard(props: Props): JSX.Element | null {
    const [redirectToParty, setRedirectToParty] = useState('');
    const [redirectToUser, setRedirectToUser] = useState(false);
    const [redirectToMediaItems, setRedirectToMediaItems] = useState(false);
    const [redirectToPartySettings, setRedirectToPartySettings] = useState('');
    const [partyName, setPartyName] = useState('');
    const userParties = useSelector(
        (state: RootAppState) => state.globalState.userParties
    );
    const party = useSelector((state: RootAppState) => state.globalState.party);
    const user = useSelector((state: RootAppState) => state.globalState.user);
    const errorMessage = useSelector(
        (state: RootAppState) => state.globalState.errorMessage
    );
    const dispatch = useDispatch();
    const { t } = useTranslation();

    useEffect(() => {
        if (props.socket && party && !redirectToParty) {
            props.socket.emit('leaveParty', { partyId: party.id });
            dispatch(setGlobalState(noPartyState));
        }
    }, [props.socket, party, dispatch, redirectToParty]);

    const handleCreateParty = async (
        event: React.MouseEvent
    ): Promise<void> => {
        event.preventDefault();

        try {
            const response = await Axios.post(
                '/api/party',
                { partyName: partyName },
                axiosConfig()
            );
            if (response.data.success) {
                const updatedUserParties = await getUpdatedUserParties(
                    dispatch,
                    t
                );
                if (party) {
                    await updateCurrentParty(
                        dispatch,
                        updatedUserParties,
                        party
                    );
                }
                setPartyName('');
            } else {
                dispatch(
                    setGlobalState({
                        errorMessage: t(
                            `apiResponseMessages.${response.data.msg}`
                        )
                    })
                );
            }
        } catch (error) {
            dispatch(
                setGlobalState({
                    errorMessage: t(`errors.partyCreationError`)
                })
            );
            return Promise.reject(error);
        }
    };

    const handlePartyChoose = (userParty: ClientParty): void => {
        dispatch(setGlobalState({ party: userParty }));
        setRedirectToParty(userParty.id);
    };

    if (redirectToParty !== '') {
        return <Navigate to={'/party/' + redirectToParty}></Navigate>;
    }

    if (redirectToPartySettings !== '') {
        return (
            <Navigate to={'/editParty/' + redirectToPartySettings}></Navigate>
        );
    }

    if (redirectToUser) {
        return <Navigate to={'/user'}></Navigate>;
    }

    if (redirectToMediaItems) {
        return <Navigate to={'/mediaItems'}></Navigate>;
    }

    return (
        <>
            <div className="flex flex-col">
                {user && (
                    <div className="w-full flex flex-row justify-end">
                        <div className="mx-2 mt-1 mb-3">
                            <div
                                className="cursor-pointer"
                                onClick={(): void => setRedirectToUser(true)}
                                title={t('common.userLinkTitle')}
                            >
                                <FontAwesomeIcon
                                    icon={faUser}
                                    size="sm"
                                ></FontAwesomeIcon>{' '}
                                {user.username}
                            </div>
                        </div>
                    </div>
                )}
                {errorMessage && (
                    <div className="w-full absolute">
                        <div className="mx-auto mt-4 max-w-lg">
                            <Alert
                                className="w-full"
                                mode="error"
                                text={errorMessage}
                                onCloseButton={(): void => {
                                    dispatch(
                                        setGlobalState({ errorMessage: '' })
                                    );
                                }}
                            ></Alert>
                        </div>
                    </div>
                )}
                {user && (
                    <div className="m-auto max-w-lg">
                        {user.role === 'admin' && (
                            <form>
                                <div className="flex flex-row mb-5">
                                    <div>
                                        <InputText
                                            containerClassName="w-full"
                                            label={
                                                t('dashboard.newParty') + ':'
                                            }
                                            labelWidth="w-32"
                                            placeholder={t('common.name')}
                                            value={partyName}
                                            onChange={(
                                                event: React.ChangeEvent<HTMLInputElement>
                                            ): void =>
                                                setPartyName(event.target.value)
                                            }
                                        ></InputText>
                                    </div>
                                    <Button
                                        type="submit"
                                        className="ml-3 mb-3 w-24"
                                        text={t('dashboard.createParty')}
                                        onClick={handleCreateParty}
                                    ></Button>
                                </div>
                            </form>
                        )}
                        <div className="m-auto pb-12 mt-3">
                            <div className="flex flex-row">
                                <Heading
                                    size={3}
                                    text={t('dashboard.yourParties')}
                                ></Heading>
                            </div>
                            <div className="flex flex-col md:flex-row mb-4 flex-wrap">
                                {userParties ? (
                                    userParties.map(
                                        (userParty: ClientParty) => {
                                            return (
                                                <PartyTile
                                                    key={userParty.id}
                                                    user={user}
                                                    userParty={userParty}
                                                    handlePartyChoose={
                                                        handlePartyChoose
                                                    }
                                                    setRedirectToPartySettings={
                                                        setRedirectToPartySettings
                                                    }
                                                ></PartyTile>
                                            );
                                        }
                                    )
                                ) : (
                                    <div>{t('dashboard.noParties')}</div>
                                )}
                            </div>
                            <Button
                                className="w-40"
                                text={
                                    <span>
                                        <FontAwesomeIcon
                                            icon={faHdd}
                                            size="lg"
                                            className="mr-3"
                                        ></FontAwesomeIcon>
                                        {user.role === 'admin'
                                            ? t('dashboard.allMedia')
                                            : t('dashboard.yourMedia')}
                                    </span>
                                }
                                onClick={(): void =>
                                    setRedirectToMediaItems(true)
                                }
                            ></Button>
                        </div>
                        <div className="text-xs text-center text-gray-500 mb-2">
                            Version: {APP_VERSION}
                        </div>
                    </div>
                )}
            </div>
        </>
    );
}

export default function AddMediaTabBar({
    activeTab,
    changeTab,
    isUploading,
    toggleCollapseAddMediaMenu
}: Props): ReactElement {
    const { t } = useTranslation();

    return (
        <div className="flex flex-row mb-1 justify-between">
            <ul className="flex">
                <li className="mr-3">
                    <button
                        className={
                            'inline-block border rounded py-1 px-3 mb-2 noOutline' +
                            (activeTab === 'user' ? ' text-black bg-white' : '')
                        }
                        onClick={(): void => changeTab('user')}
                        title={t('mediaMenu.addUserTab')}
                    >
                        <FontAwesomeIcon
                            className={
                                activeTab === 'user'
                                    ? ' text-black bg-white'
                                    : ''
                            }
                            icon={faUser}
                        ></FontAwesomeIcon>
                    </button>
                </li>
                <li className="mr-3">
                    <button
                        className={
                            'inline-block border rounded py-1 px-3 mb-2 noOutline' +
                            (activeTab === 'web' ? ' text-black bg-white' : '')
                        }
                        onClick={(): void => changeTab('web')}
                        title={t('mediaMenu.addWebTab')}
                    >
                        <FontAwesomeIcon
                            className={
                                activeTab === 'web'
                                    ? ' text-black bg-white'
                                    : ''
                            }
                            icon={faGlobe}
                        ></FontAwesomeIcon>
                    </button>
                </li>
                <li className="mr-3">
                    <button
                        className={
                            'inline-block border rounded py-1 px-3 mb-2 noOutline' +
                            (activeTab === 'file' ? ' text-black bg-white' : '')
                        }
                        onClick={(): void => changeTab('file')}
                        title={t('mediaMenu.addFileTab')}
                    >
                        <FontAwesomeIcon
                            className={
                                activeTab === 'file'
                                    ? ' text-black bg-white'
                                    : ''
                            }
                            icon={faCloudUploadAlt}
                        ></FontAwesomeIcon>
                    </button>
                </li>
            </ul>
            <div>
                {!isUploading && (
                    <div
                        className="p-1 cursor-pointer"
                        onClick={toggleCollapseAddMediaMenu}
                        title={t('mediaMenu.collapseTitle')}
                    >
                        <FontAwesomeIcon
                            className="text-gray-200 hover:text-gray-100"
                            size="lg"
                            icon={faAngleUp}
                        ></FontAwesomeIcon>
                    </div>
                )}
            </div>
        </div>
    );
}