@fortawesome/free-solid-svg-icons#faArrowDown19 TypeScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faArrowDown19.
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: ServantsPage.tsx From apps with MIT License | 4 votes |
|
render() {
if (this.state.error) return <ErrorStatus error={this.state.error} />;
if (this.state.loading) return <Loading />;
const servants = this.servants(),
hasPaginator = servants.length > this.state.perPage,
results = servants.slice(this.state.perPage * this.state.page, this.state.perPage * (this.state.page + 1));
return (
<div id="servants" className="listing-page">
<Row>
<Col md={12} lg="auto" id="class-name">
{normalClasses.map((className) => {
const active = this.isClassFilterActive(className);
return (
<span
key={className}
className={"filter"}
style={{ opacity: active ? 1 : 0.5 }}
onClick={(ev: MouseEvent) => {
this.toggleClassFilter(className);
}}
>
<ClassIcon height={37} rarity={active ? 5 : 3} className={className} />
</span>
);
})}
<div className={"d-block d-lg-none"} style={{ flexBasis: "100%", height: 0 }}></div>
{extraClasses.map((className) => {
const active = this.isClassFilterActive(className);
return (
<span
key={className}
className={"filter"}
style={{ opacity: active ? 1 : 0.5 }}
onClick={(ev: MouseEvent) => {
this.toggleClassFilter(className);
}}
>
<ClassIcon height={37} rarity={active ? 5 : 3} className={className} />
</span>
);
})}
</Col>
<Col sm={12} lg={3} id="servant-search">
<Form>
<Form.Control
placeholder={"Search"}
value={this.state.search ?? ""}
onChange={(ev: ChangeEvent) => {
this.setState({ search: ev.target.value });
}}
/>
</Form>
</Col>
</Row>
<Row>
<Col sm={12} md={6} lg={5} id="servant-rarity">
<ButtonGroup>
{[...new Set(this.state.servants.map((s) => s.rarity))]
// deduplicate star counts
.sort((a, b) => a - b)
// sort
.map((rarity) => (
<Button
variant={
this.state.activeRarityFilters.includes(rarity) ? "success" : "outline-dark"
}
key={rarity}
onClick={(ev: MouseEvent) => this.toggleRarityFilter(rarity)}
>
{rarity} ★
</Button>
))}
</ButtonGroup>
</Col>
<Col sm={12} md={6} lg={7}>
{this.paginator(servants.length)}
</Col>
</Row>
<hr />
<Table striped bordered hover responsive>
<thead>
<tr>
<th className="col-center text-nowrap">
<Button
variant=""
className="py-0 px-2 border-0 align-bottom"
onClick={() => {
this.setState({
sortKey: this.state.sortKey === "collectionNo" ? "id" : "collectionNo",
});
}}
>
{this.state.sortKey === "collectionNo" ? (
<FontAwesomeIcon icon={faHashtag} title="Collection No" />
) : (
<FontAwesomeIcon icon={faKey} title="Servant ID" />
)}
</Button>
<Button
variant=""
className="py-0 px-2 border-0 align-bottom"
onClick={() => {
this.setState({
sortDirection:
this.state.sortDirection === "ascending" ? "descending" : "ascending",
});
}}
>
{this.state.sortDirection === "ascending" ? (
<FontAwesomeIcon icon={faArrowDown19} title="Ascending" />
) : (
<FontAwesomeIcon icon={faArrowDown91} title="Descending" />
)}
</Button>
</th>
<th className="col-center">Class</th>
<th className="col-center">Thumbnail</th>
<th>Name</th>
<th className="rarity-col">Rarity</th>
</tr>
</thead>
<tbody>
{results.map((servant) => {
const route = `/${this.props.region}/servant/${servant.collectionNo}`;
return (
<tr key={servant.id}>
<td className="col-center">
<Link to={route}>
{servant.collectionNo} (
<span className="listing-svtId" lang="en-US">
{servant.id}
</span>
)
</Link>
</td>
<td className="col-center">
<ClassIcon className={servant.className} rarity={servant.rarity} height={50} />
</td>
<td className="col-center">
<Link to={route}>
<img
src={servant.face}
alt={`${servant.name} face icon`}
width={50}
height={50}
/>
</Link>
</td>
<td style={{ whiteSpace: Manager.showingJapaneseText() ? "nowrap" : "normal" }}>
<Link to={route}>{servant.name}</Link>
</td>
<td className="rarity-col">
<RarityDescriptor rarity={servant.rarity} />
</td>
</tr>
);
})}
</tbody>
</Table>
{hasPaginator ? this.paginator(servants.length) : undefined}
</div>
);
}
