@fortawesome/free-solid-svg-icons#faXmark TypeScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faXmark.
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: Navigation.tsx From apps with MIT License | 4 votes |
|
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>
</>
);
}
