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

export default function ArtifactInfoDisplay() {
  const { t } = useTranslation("artifact")
  return <Grid container spacing={1} >
    <Grid item xs={12} lg={5} xl={4}>
      <ImgFullwidth src={artifactcard} />
    </Grid>
    <Grid item xs={12} lg={7} xl={8}>
      <Trans t={t} i18nKey="info.section1">
        <Typography variant="h5">Substat rolls</Typography>
        <Typography gutterBottom>The <b>number of rolls</b> a substat has is shown to the left of the substat. As the number gets higher, the substat is more colorful:<Colors />.</Typography>

        <Typography variant="h5">Substat Roll Value</Typography>
        <Typography gutterBottom>The Roll Value(RV) of an subtat is a percentage of the current value over the highest potential 5<Stars stars={1} /> value. From the Image, the maximum roll value of CRIT DMG is 7.8%. In RV: <b>5.8/7.8 = 69.2%.</b></Typography>

        <Typography variant="h5">Current Roll Value vs. Maximum Roll Value</Typography>
        <Typography gutterBottom>When a 5<Stars stars={1} /> have 9(4+5) total rolls, with each of the rolls having the highest value, that is defined as a 900% RV artifact. However, most of the artifacts are not this lucky. The <b>Current RV</b> of an artifact is a percentage over that 100% artifact. The <b>Maximum RV</b> is the maximum possible RV an artifact can achieve, if the remaining artifact rolls from upgrades are the hightest possible value.</Typography>

        <Typography variant="h5">Locking an artifact</Typography>
        <Typography>By locking an artifact <FontAwesomeIcon icon={faBan} />, This artifact will not be picked up by the build generator for optimization. An equipped artifact is locked by default.</Typography>
      </Trans>
    </Grid>
    <Grid item xs={12} lg={6} xl={7} >
      <Trans t={t} i18nKey="info.section2">
        <Typography variant="h5">Artifact Editor</Typography>
        <Typography gutterBottom>A fully featured artifact editor, that can accept any 3<Stars stars={1} /> to 5<Stars stars={1} /> Artifact. When a substat is inputted, it can calculate the exact roll values. It will also make sure that you have the correct number of rolls in the artifact according to the level, along with other metrics of validation.</Typography>

        <Typography variant="h5">Scan screenshots</Typography>
        <Typography gutterBottom>Manual input is not your cup of tea? You can scan in your artifacts with screenshots! On the Artifact Editor, click the <SqBadge color="info">Show Me How!</SqBadge> button to learn more.</Typography>

        <Typography variant="h6">Automatic Artifact Scanner</Typography>
        <Typography gutterBottom>If you are playing Genshin on PC, you can download a tool that automatically scans all your artifacts for you, and you can then import that data in <FontAwesomeIcon icon={faCog} /> Database. <Link component={RouterLink} to="/scanner">Click here</Link> for a list of scanners that are compatible with GO.</Typography>

        <Typography variant="h5">Duplicate/Upgrade artifact detection</Typography>
        <Typography>Did you know GO can detect if you are adding a <b>duplicate</b> artifact that exists in the system? It can also detect if the current artifact in editor is an <b>upgrade</b> of an existing artifact as well. Once a duplicate/upgrade is detected, a preview will allow you to compare the two artifacts in question(See Image).</Typography>
      </Trans>
    </Grid>
    <Grid item xs={12} lg={6} xl={5}>
      <ImgFullwidth src={artifacteditor} />
    </Grid>
    <Grid item xs={12} lg={7} xl={6}>
      <ImgFullwidth src={artifactfilter} />
    </Grid>
    <Grid item xs={12} lg={5} xl={6}>
      <Trans t={t} i18nKey="info.section3">
        <Typography variant="h5">Artifact Inventory</Typography>
        <Typography gutterBottom>All your artifacts that you've added to GO is displayed here. The filters here allow you to further refine your view of your artifacts. </Typography>
        <Typography variant="h5">Example: Finding Fodder Artifacts</Typography>
        <Typography>By utilizing the artifact filter, and the artifact RV, you can quickly find artifacts to feed as food.</Typography>
        <Typography>In this example, the filters are set thusly: </Typography>
        <Typography component="div" >
          <ul>
            <li>Limit level to 0-8.</li>
            <li>Unlocked artifacts in Inventory.</li>
            <li>Removing the contribution of flat HP, flat DEF and Energy Recharge to RV calculations.</li>
            <li>Sorted by Ascending Max Roll Value.</li>
          </ul>
        </Typography>
        <Typography>This will filter the artifact Inventory by the lowest RV artifacts, for desired substats.</Typography>
      </Trans>
    </Grid>
  </Grid>
}

Sidebar =() =>  {
        return (
            <div className={classNames("bg-none", "border-right")} id="sidebar-wrapper">
                <div className="sidebar-heading">TutorBase</div>
                <ListGroup>
                    <ListGroupItem tag="a" href="/home" className={classNames("list-group-item", "bg-none", "tab-active")}><FontAwesomeIcon icon={faAddressBook} />Schedule a Session</ListGroupItem>
                    <ListGroupItem tag="a" href="/home/meetings" className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon icon={faCalendar} />Upcoming Meetings</ListGroupItem>
                    <ListGroupItem tag="a" href="/home/history" className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon icon={faHistory} />History</ListGroupItem>
                    <ListGroupItem tag="a" href="/home/settings" className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon icon={faCog} />Settings</ListGroupItem>
                </ListGroup>
                <ListGroup className="list-group-bottom">
                    {/* <ListGroupItem tag="a" href="#" className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon icon={faRandom} />Switch Dashboard</ListGroupItem> */}
                    <ListGroupItem tag="a" href="#" className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon icon={faSignOutAlt} />Logout</ListGroupItem>
                </ListGroup>
            </div>
        );
}

content = [{
  i18Key: "tabs.artifacts",
  svg: SlotIconSVG.flower,
  to: "/artifacts",
  value: "artifacts",
}, {
  i18Key: "tabs.weapons",
  svg: faGavel,
  to: "/weapons",
  value: "weapons",
}, {
  i18Key: "tabs.characters",
  svg: faIdCard,
  to: "/characters",
  value: "characters",
}, {
  i18Key: "tabs.tools",
  svg: faTools,
  to: "/tools",
  value: "tools",
}, {
  i18Key: "tabs.setting",
  svg: faCog,
  to: "/setting",
  value: "setting",
}, {
  i18Key: "tabs.doc",
  svg: faBook,
  to: "/doc",
  value: "doc",
},] as const

/**
 * Icons listed here no longer need to be imported in other files.
 * Instead a string can be passed to the `icon` property.
 * By default, the icons are all "solid", which is why `far` is also added ...
 * ... simply do `icon={["far", "icon-name"]}` to use the "regular" version of "icon-name"
 * @see https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react#using
 */
library.add(
  far,
  faCog,
  faSearch,
  faTimes,
  faWindowRestore,
  faEllipsisV,
  faWindowMaximize,
  faTimesCircle,
  faStar,
  faMask,
  faExclamationCircle,
  faCopy,
  faAngleDown,
  faAngleUp,
  faCheckCircle,
  faUpload
);

constructor(
    @Optional()
    @SkipSelf()
    parentModule: CoreModule,
    faIconLibrary: FaIconLibrary
  ) {
    if (parentModule) {
      throw new Error('CoreModule is already loaded. Import only in AppModule');
    }
    faIconLibrary.addIcons(
      faCog,
      faBars,
      faRocket,
      faPowerOff,
      faUserCircle,
      faPlayCircle,
      faGithub,
      faMediumM,
      faTwitter,
      faInstagram,
      faYoutube
    );
  }

export default function Navigation(props: INavigationProps) {
  return (
    <div className={style.navigation}>
      <ControlButtonGroup/>
      <Menu/>
      <button className={style.setting_btn} onClick={() => history.push(Routers.SETTINGS)}>
        <FontAwesomeIcon icon={faCog}/>
      </button>
    </div>
  );
}

constructor(library: FaIconLibrary) {
    library.addIcons(fasStar, faCog, faDog, faWindowRestore)
    library.addIcons(
      farStar,
      farMoon,
      farSun,
      faSortAmountUp,
      faSortAmountDown,
      faSortAlphaUp,
      faSortAlphaDown
    )
  }

public constructor(private _matIconRegistry: MatIconRegistry, private _sanitizer: DomSanitizer) {
    this.addSvg(faAngleDoubleDown);
    this.addSvg(faArrowUp);
    this.addSvg(faArrowDown);
    this.addSvg(faSyncAlt);
    this.addSvg(faTimes);
    this.addSvg(faExternalLinkAlt);
    this.addSvg(faQuestionCircle);
    this.addSvg(faPlay);
    this.addSvg(faClock);
    this.addSvg(faBug);
    this.addSvg(faLink);
    this.addSvg(faDiscord);
    this.addSvg(faGithub);
    this.addSvg(faInfoCircle);
    this.addSvg(faCodeBranch);
    this.addSvg(faCaretDown);
    this.addSvg(faExclamationTriangle);
    this.addSvg(faCode);
    this.addSvg(faPatreon);
    this.addSvg(faCoins);
    this.addSvg(faCompressArrowsAlt);
    this.addSvg(faPencilAlt);
    this.addSvg(faCheckCircle);
    this.addSvg(faDiceD6);
    this.addSvg(faSearch);
    this.addSvg(faInfoCircle);
    this.addSvg(faNewspaper);
    this.addSvg(faCog);
    this.addSvg(faAngleUp);
    this.addSvg(faAngleDown);
    this.addSvg(faChevronRight);
    this.addSvg(faUserCircle);
    this.addSvg(faEllipsisV);
    this.addSvg(faCopy);
    this.addSvg(farCheckCircle);
    this.addSvg(faExclamation);
    this.addSvg(faTrash);
    this.addSvg(faHistory);
    this.addSvg(faCaretSquareRight);
    this.addSvg(faCaretSquareLeft);
    this.addSvg(faMinimize);
    this.addSvg(faUpRightFromSquare);
  }

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

settingsIcon = faCog as IconProp;

export default function PartyTile({
    user,
    userParty,
    handlePartyChoose,
    setRedirectToPartySettings
}: Props): ReactElement {
    const dispatch = useDispatch();
    const { t } = useTranslation();

    return (
        <div
            className="w-40 h-40 p-2 mr-2 my-2 bg-gray-800 hover:bg-gray-700 cursor-pointer"
            key={userParty.id}
            onClick={(): void => {
                if (userParty.status === 'active' || user.role === 'admin') {
                    handlePartyChoose(userParty);
                } else {
                    dispatch(
                        setGlobalState({
                            errorMessage: t(`errors.joinInactivePartyError`)
                        })
                    );
                }
            }}
            title={t('dashboard.partyTileTitle')}
        >
            <div className="flex flex-row justify-between">
                <div
                    className={
                        'mb-1 text-xs' +
                        (userParty.status === 'active'
                            ? ' text-green-500'
                            : ' text-red-600')
                    }
                >
                    {userParty.status === 'active'
                        ? t('common.statusActive')
                        : t('common.statusStopped')}
                </div>
                {user.role === 'admin' && (
                    <div>
                        <ButtonIcon
                            color="text-gray-200 z-50"
                            icon={
                                <FontAwesomeIcon icon={faCog}></FontAwesomeIcon>
                            }
                            title={t('dashboard.editPartyTitle')}
                            onClick={(event): void => {
                                event.stopPropagation();
                                setRedirectToPartySettings(userParty.id);
                            }}
                        ></ButtonIcon>
                    </div>
                )}
            </div>
            <div className="mb-1">{userParty.name}</div>
            <div className="flex flex-row flex-wrap">
                {userParty.members.map((member: ClientPartyMember) => {
                    return (
                        <Avatar
                            key={member.username}
                            size={8}
                            fontSize={'text-sm'}
                            username={member.username}
                            user={user}
                        ></Avatar>
                    );
                })}
            </div>
        </div>
    );
}

Sidebar = (params: IParams) => {
    let dispatch = useDispatch();
    let param : string = useLocation().pathname;
    let extension:string = param.split('/')[2];
    return (
        <div className={classNames("bg-none", "border-right")} id="sidebar-wrapper">
            <div className="sidebar-heading" style={{position: "fixed"}}>TutorBase</div>
            <ListGroup>
                {params.mode === "Tutor"
                    ? ( params.isTutor ? (
                        <div style={{position: "fixed", top: '50px'}}>
                            <ListGroupItem tag="a" href="/tutor/overview"
                                           className={classNames("list-group-item", "bg-none", extension==='overview' ?"tab-active" : null)}><FontAwesomeIcon
                                icon={faUserClock}/>Overview</ListGroupItem>
                            <ListGroupItem tag="a" href="/tutor/meetings"
                                           className={classNames("list-group-item", "bg-none", extension==='meetings' ?"tab-active" : null)}><FontAwesomeIcon
                                icon={faCalendar}/>Upcoming Meetings</ListGroupItem>
                            <ListGroupItem tag="a" href="/tutor/history"
                                           className={classNames("list-group-item", "bg-none", extension==='history' ?"tab-active" : null)}><FontAwesomeIcon
                                icon={faHistory}/>History</ListGroupItem>
                            <ListGroupItem tag="a" href="/tutor/analytics"
                                           className={classNames("list-group-item", "bg-none", extension==='analytics' ?"tab-active" : null)}><FontAwesomeIcon
                                icon={faChartArea}/>Analytics</ListGroupItem>
                            <ListGroupItem tag="a" href="/tutor/settings"
                                           className={classNames("list-group-item", "bg-none", extension==='settings' ?"tab-active" : null)}><FontAwesomeIcon
                                icon={faCog}/>Settings</ListGroupItem>
                            {isMobile ?
                                <div>
                                <ListGroupItem tag="a" href="/home/schedule" className={classNames("list-group-item", "bg-none")} style={{marginTop:'20rem'}}>
                                    <FontAwesomeIcon icon={faToggleOn}/>
                                    Switch to Client Dashboard
                                </ListGroupItem>
                                <ListGroupItem tag="a" href="#" className={classNames("list-group-item", "bg-none")}>
                                    <FontAwesomeIcon icon={faSignOutAlt}/>
                                    Logout
                                </ListGroupItem>
                                </div>

                            : null}
                        </div>
                    )
                    :
                    <div></div>
                    )
                    : (
                        <div style={{position: "fixed", top: '50px'}}>
                            <ListGroupItem tag="a" href="/home/schedule"
                                           className={classNames("list-group-item", "bg-none", extension==='schedule' ?"tab-active" : null)}><FontAwesomeIcon
                                icon={faAddressBook}/>Schedule a Session</ListGroupItem>
                            <ListGroupItem tag="a" href="/home/meetings"
                                           className={classNames("list-group-item", "bg-none", extension==='meetings' ?"tab-active" : null)}><FontAwesomeIcon
                                icon={faCalendar}/>Upcoming Meetings</ListGroupItem>
                            <ListGroupItem tag="a" href="/home/history"
                                           className={classNames("list-group-item", "bg-none", extension==='history' ?"tab-active" : null)}><FontAwesomeIcon
                                icon={faHistory}/>History</ListGroupItem>
                            <ListGroupItem tag="a" href="/home/settings"
                                           className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon
                                icon={faCog}/>Settings</ListGroupItem>
                            {isMobile ?
                                <div>
                                <ListGroupItem tag="a" href="/tutor/meetings" className={classNames("list-group-item", "bg-none")} style={{marginTop:'20rem'}}>
                                    <FontAwesomeIcon icon={faToggleOff}/>
                                    Switch to Tutor Dashboard
                                </ListGroupItem>
                                <ListGroupItem tag="a" href="#" className={classNames("list-group-item", "bg-none")}>
                                    <FontAwesomeIcon icon={faSignOutAlt}/>
                                    Logout
                                </ListGroupItem>
                                </div>

                            : null}
                        </div>
                    )}
            </ListGroup>
            {isMobile ? null 
            :<ListGroup className="list-group-bottom">
                {params.mode === "Tutor"
                    ? (
                        <div>
                            <ListGroupItem tag="a" href="/home/schedule" className={classNames("list-group-item", "bg-none")}>
                                <FontAwesomeIcon icon={faToggleOn}/>
                                Switch to Client Dashboard
                            </ListGroupItem>
                        </div>
                    ) :
                    (
                        <div>
                            <ListGroupItem tag="a" href="/tutor/overview" className={classNames("list-group-item", "bg-none")}>
                                <FontAwesomeIcon icon={faToggleOff}/>
                                Switch to Tutor Dashboard
                            </ListGroupItem>
                        </div>
                    )
                }


                <ListGroupItem tag="a" href="#" className={classNames("list-group-item", "bg-none")}>
                    <FontAwesomeIcon icon={faSignOutAlt}/>
                    Logout
                </ListGroupItem>
            </ListGroup>
            }
        </div>
    );
}

render() {
    return (
      <div>
        <div id="Navbar-Full" className="section">
          <div id="Navbar" className="section">
            <div className="logo" />
            <div
              id="Outer"
              style={{
                clipPath:
                  'polygon(0 0, 100% 0,' +
                  this.state.points[1] +
                  'px 50%, 100% 100%, 0 100%, ' +
                  this.state.points[0] +
                  'px 50%)',
              }}
              className="links outer"
            >
              <div
                id="Inner"
                style={{
                  clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%, ' + this.state.points[0] + 'px 50%)',
                }}
                className="links inner"
              >
                <div>
                  <Link to={this.navbarLinks[0]}>LOBBY</Link>
                  <Link to={this.navbarLinks[1]}>START HERE</Link>
                  <Link to={this.navbarLinks[2]}>COMMUNITY</Link>
                  <Link to={this.navbarLinks[3]}>STATS</Link>
                  <Link to={this.navbarLinks[4]}>DEVELOPMENT</Link>
                </div>
                <div>
                  {this.props.username.length > 0 ? (
                    <>
                      <Link className="username" to={'/profile/' + this.props.username}>
                        {this.props.username}
                      </Link>
                      <button onClick={this.toggleSettings}>
                        <FontAwesomeIcon icon={faCog} />
                      </button>
                      <button onClick={this.handleLogout}>
                        <FontAwesomeIcon icon={faSignOutAlt} />
                      </button>
                    </>
                  ) : (
                    <>
                      <Link to="/">LOG IN</Link>
                      <p className="or">/</p>
                      <Link to="/signup">SIGN UP</Link>
                    </>
                  )}
                </div>
              </div>
            </div>
          </div>
          <div id="Navbar-Mobile" className="section">
            <div className="logo" />
            <div>
              <button onClick={this.toggleSettings}>
                <FontAwesomeIcon icon={faCog} />
              </button>
              <button onClick={this.toggleSidebar}>
                <FontAwesomeIcon icon={faList} />
              </button>
            </div>
          </div>
        </div>
        {this.state.showSettings ? (
          <StyleForm onExit={this.hideSettings} style={this.props.style} dispatch={this.props.dispatch} />
        ) : null}
        <div
          className="links list"
          style={{
            transform: this.state.showSidebar ? 'translate(0%, 0%)' : 'translate(100%, 0%)',
          }}
        >
          <AvalonScrollbars>
            <div className="links container">
              <Link to={this.navbarLinks[0]}>LOBBY</Link>
              <Link to={this.navbarLinks[1]}>START HERE</Link>
              <Link to={this.navbarLinks[2]}>COMMUNITY</Link>
              <Link to={this.navbarLinks[3]}>STATS</Link>
              <Link to={this.navbarLinks[4]}>DEVELOPMENT</Link>
              <div />
              {this.props.username.length > 0 ? (
                <>
                  {' '}
                  <Link to={'/profile/' + this.props.username}>PROFILE</Link>
                  <button onClick={this.hideSidebarToSettings}>SETTINGS</button>
                  <button onClick={this.handleLogout}>LOG OUT</button>
                </>
              ) : (
                <>
                  <Link to="/">LOG IN</Link>
                  <Link to="/signup">SIGN UP</Link>
                </>
              )}
            </div>
          </AvalonScrollbars>
        </div>
      </div>
    );
  }

render() {
        return (
            <>
                <Navbar id={"navigation"} bg={"dark"} variant={"dark"} expand={"lg"}>
                    <Container fluid>
                        <Navbar.Brand as={Link} to="/" title="Atlas Academy Database">
                            Atlas Academy DB
                        </Navbar.Brand>
                        <Navbar.Toggle />

                        <Navbar.Collapse>
                            <Nav activeKey={this.props.location.pathname}>
                                <NavPage path="servants" description="Servants" />
                                <NavPage path="craft-essences" description="Craft Essences" />
                                <NavPage path="wars" description="Wars" />
                                <NavDropdown title="Other" id="dropdown-other">
                                    <NavDropdownPage path="command-codes" description="Command Codes" />
                                    <NavDropdownPage path="mystic-codes" description="Mystic Codes" />
                                    <NavDropdownPage path="items" description="Materials" />
                                    <NavDropdownPage path="events" description="Events" />
                                    <NavDropdownPage path="bgms" description="BGMs" />
                                    <NavDropdownPage path="master-missions" description="Master Missions" />
                                </NavDropdown>
                                <NavDropdown title="Search" id="dropdown-search">
                                    <NavDropdownPage path="entities" description="Entities" />
                                    <NavDropdownPage path="skills" description="Skills" />
                                    <NavDropdownPage path="noble-phantasms" description="Noble Phantasms" />
                                    <NavDropdownPage path="funcs" description="Functions" />
                                    <NavDropdownPage path="buffs" description="Buffs" />
                                    <NavDropdownPage path="quests" description="Quests" />
                                    <NavDropdownPage path="scripts" description="Scripts" />
                                </NavDropdown>
                                <NavDropdown title="Changelog" id="dropdown-search">
                                    <NavDropdownPage path="changes" description="Master Data" />
                                    <NavDropdownPage path="enemy-changes" description="Enemy Data" />
                                </NavDropdown>
                            </Nav>
                            <Nav className={"ml-auto icons"} activeKey="">
                                <Row>
                                    <Col>
                                        <Link
                                            to={this.regionLink(Region.JP)}
                                            className={`nav-link ${this.regionClass(Region.JP)}`}
                                        >
                                            <JPFlag title="View data from the JP version" />
                                        </Link>
                                    </Col>
                                    <Col>
                                        <Link
                                            to={this.regionLink(Region.NA)}
                                            className={`nav-link ${this.regionClass(Region.NA)}`}
                                        >
                                            <USFlag title="View data from the NA version" />
                                        </Link>
                                    </Col>
                                    <Col>
                                        <Link
                                            to={this.regionLink(Region.CN)}
                                            className={`nav-link ${this.regionClass(Region.CN)}`}
                                        >
                                            <CNFlag title="View data from the CN version" />
                                        </Link>
                                    </Col>
                                    <Col>
                                        <Link
                                            to={this.regionLink(Region.KR)}
                                            className={`nav-link ${this.regionClass(Region.KR)}`}
                                        >
                                            <KRFlag title="View data from the KR version" />
                                        </Link>
                                    </Col>
                                    <Col>
                                        <Link
                                            to={this.regionLink(Region.TW)}
                                            className={`nav-link ${this.regionClass(Region.TW)}`}
                                        >
                                            <TWFlag title="View data from the TW version" />
                                        </Link>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col>
                                        <Nav.Link
                                            href="https://atlasacademy.io/discord"
                                            target="_blank"
                                            rel="noreferrer"
                                        >
                                            <FontAwesomeIcon icon={faDiscord} title="Atlas Academy Discord" />
                                        </Nav.Link>
                                    </Col>
                                    <Col>
                                        <Nav.Link
                                            href="https://twitter.com/aacademy_fgo"
                                            target="_blank"
                                            rel="noreferrer"
                                        >
                                            <FontAwesomeIcon icon={faTwitter} title="Atlas Academy Twitter" />
                                        </Nav.Link>
                                    </Col>
                                    <Col>
                                        <Nav.Link
                                            href="https://github.com/atlasacademy/apps"
                                            target="_blank"
                                            rel="noreferrer"
                                        >
                                            <FontAwesomeIcon icon={faGithub} title="Atlas Academy DB Github" />
                                        </Nav.Link>
                                    </Col>
                                </Row>
                                <Button variant={"primary"} onClick={() => this.showSettings()}>
                                    <FontAwesomeIcon icon={faCog} title="Settings" />
                                </Button>
                            </Nav>
                        </Navbar.Collapse>
                    </Container>
                </Navbar>

                <Modal show={this.state.showSettings} onHide={() => this.hideSettings()}>
                    <Modal.Header>
                        <Modal.Title>Settings</Modal.Title>
                        <button className="modal-close" onClick={() => this.hideSettings()}>
                            <FontAwesomeIcon icon={faXmark} title="Close Settings" />
                        </button>
                    </Modal.Header>
                    <Modal.Body>
                        <SettingForm language={this.props.language} theme={this.props.theme} />
                    </Modal.Body>
                </Modal>
            </>
        );
    }

BasicFeatures = ({ SubmitButton, usedFeatures }: BasicFeatureProp) => {
  const [selectedKey, setFeatureKey] = useState('TRANSCODE')
  const [selected, setSelected] = useState(0)

  const [validFeatures, setValidFeature] = useState<FeatureKeyType[]>(
    Object.keys(features) as FeatureKeyType[]
  )

  const checkFeature = (featureKey: string) => {
    if (usedFeatures.length > 0) {
      const index = usedFeatures.indexOf(featureKey)
      if (index === -1) return true
      return false
    }
    return true
  }

  useEffect(() => {
    const validKeys = Object.keys(features).filter(
      featureKey =>
        !features[featureKey as FeatureKeyType].noDisplay &&
        checkFeature(featureKey)
    )

    setValidFeature(validKeys as FeatureKeyType[])
    setFeatureKey(validKeys[0])
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [usedFeatures])

  const keyMap = {
    UP: ['up', 'k', 'w'],
    DOWN: ['down', 'j', 's']
  }

  const handlers = {
    DOWN: (e?: KeyboardEvent) => {
      e?.preventDefault()

      const newKey = selected + 1 < validFeatures.length ? selected + 1 : 0

      const newFeatureKey = validFeatures[newKey]
      setSelected(newKey)
      setFeatureKey(newFeatureKey)
    },
    UP: (e?: KeyboardEvent) => {
      e?.preventDefault()

      const newKey = selected - 1 >= 0 ? selected - 1 : validFeatures.length - 1
      const newFeatureKey = validFeatures[newKey]
      setSelected(newKey)
      setFeatureKey(newFeatureKey)
    }
  }

  return (
    <GlobalHotKeys keyMap={keyMap} handlers={handlers} allowChanges={true}>
      <div className="flex flex-col h-full">
        <div className="flex h-full bg-gray-900">
          <div className="w-1/4 bg-gray-800 bg-opacity-25 h-full">
            <div className="flex">
              {validFeatures.length > 0 ? (
                <nav id="nav" className={styles.nav}>
                  <span
                    className="absolute w-full rounded-lg shadow ease-out highlighter transition-transform duration-200"
                    style={{
                      backgroundColor: '#6c63ff',
                      height: `${63 / validFeatures.length}vh`
                    }}
                  />
                  <ul className={styles.options}>
                    {validFeatures.map((featureKey, index) => {
                      const currentFeature = features[featureKey]

                      return (
                        <li
                          key={currentFeature.name}
                          className="h-full flex items-center">
                          <button
                            type="button"
                            onClick={() => {
                              setSelected(index)
                              setFeatureKey(featureKey)
                            }}
                            // ariaSelected={selected === 0}
                            className="py-2 px-3 w-full h-full flex items-center focus:outline-none focus-visible:underline">
                            <FontAwesomeIcon
                              icon={faCog}
                              className={
                                selected === index
                                  ? 'text-gray-200'
                                  : 'text-gray-500'
                              }
                            />
                            <span
                              className={`ml-4 text-sm font-medium transition-all ease-out duration-200 ${
                                selected === index
                                  ? 'text-gray-50'
                                  : 'text-gray-300'
                              }`}>
                              {currentFeature.name}
                            </span>
                          </button>
                        </li>
                      )
                    })}
                  </ul>
                </nav>
              ) : null}
            </div>
          </div>
          <div className="w-full overflow-y-auto scroll-thin">
            {validFeatures.length > 0 ? (
              <DisplayFeature
                selectedKey={selectedKey as FeatureKeyType}
                SubmitButton={SubmitButton}></DisplayFeature>
            ) : (
              <div className="w-full flex flex-col items-center">
                <p className="text-3xl w-3/4 pt-20 text-center text-white">
                  All features have been used!
                </p>
                <p className="text-l w-3/4 py-4 pb-20 text-center text-white">
                  One feature can be currently only used once.
                </p>

                <div className="flex justify-center">
                  <SubmitButton></SubmitButton>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* @ts-ignore Styled JSX */}
        <style jsx>
          {`
            .highlighter {
              z-index: 0;
              transform: translateY(calc(100% * ${selected}));
            }
          `}
        </style>
      </div>
    </GlobalHotKeys>
  )
}

function QueueManager(props: QueueManagerProps) {
    const spacingClass = 'mt-4';

    let startedMeetings = [];
    let unstartedMeetings = [];
    for (const meeting of props.queue.meeting_set) {
        if (meeting.status ===  MeetingStatus.STARTED) {
            startedMeetings.push(meeting);
        } else {
            unstartedMeetings.push(meeting);
        }
    }

    const currentStatus = props.queue.status === 'open';
    const absoluteUrl = `${location.origin}/queue/${props.queue.id}`;

    const cannotReassignHostWarning = (
        <Alert variant='primary'>
            Once you start a video conferencing meeting or indicate you are ready for an attendee in person,
            you cannot re-assign the meeting to another host.
        </Alert>
    );

    return (
        <div>
            <div className="float-right">
                <Link to={`/manage/${props.queue.id}/settings`}>
                    <Button variant='primary' aria-label='Settings'>
                        <FontAwesomeIcon icon={faCog} />
                        <span className='ml-2'>Settings</span>
                    </Button>
                </Link>
            </div>
            <h1>Manage: {props.queue.name}</h1>
            <p><Link to={"/queue/" + props.queue.id}>View as visitor</Link></p>
            <Row noGutters className={spacingClass}>
                <Col md={2}><Form.Label htmlFor='queue-url'>Queue URL</Form.Label></Col>
                <Col md={6}><CopyField text={absoluteUrl} id="queue-url"/></Col>
            </Row>
            <Row noGutters className={spacingClass}>
                <Col md={2}><Form.Label htmlFor='queue-status'>Queue Status</Form.Label></Col>
                <Col md={6}>
                    <Form.Check
                        className='switch'
                        id='queue-status'
                        type='switch'
                        label={currentStatus ? 'Open' : 'Closed'}
                        checked={props.queue.status === 'open'}
                        onChange={(e: ChangeEvent<HTMLInputElement>) => props.onSetStatus(!currentStatus)}
                    />
                </Col>
            </Row>
            <Row noGutters className={spacingClass}>
                <Col md={2}><div id='created'>Created</div></Col>
                <Col md={6}><div aria-labelledby='created'><DateDisplay date={props.queue.created_at} /></div></Col>
            </Row>
            <h2 className={spacingClass}>Meetings in Progress</h2>
            <Row noGutters className={spacingClass}><Col md={8}>{cannotReassignHostWarning}</Col></Row>
            <Row noGutters className={spacingClass}>
                <Col md={12}><MeetingsInProgressTable meetings={startedMeetings} {...props} /></Col>
            </Row>
            <h2 className={spacingClass}>Meetings in Queue</h2>
            <Row noGutters className={spacingClass}>
                <Col md={8}>
                    {userLoggedOnWarning}
                    {props.addMeetingError && <ErrorDisplay formErrors={[props.addMeetingError]} />}
                    <AddAttendeeForm
                        allowedBackends={new Set(props.queue.allowed_backends)}
                        backends={props.backends}
                        defaultBackend={props.defaultBackend}
                        disabled={props.disabled}
                        onSubmit={props.onAddMeeting}
                    />
                </Col>
            </Row>
            <Row noGutters className={spacingClass}>
                <Col md={12}><MeetingsInQueueTable meetings={unstartedMeetings} {...props} /></Col>
            </Row>
        </div>
    );
}