@ant-design/icons#FundTwoTone JavaScript Examples
The following examples show how to use
@ant-design/icons#FundTwoTone.
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: App.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<div style={{ position: "fixed" }}>
<Transition
items={this.state.logined}
native
from={{ opacity: 0 }}
enter={{ opacity: 1 }}
leave={{ opacity: 0, display: "none" }}
>
{(styles, item) => {
if (item && !this.state.loading) {
return (
<animated.div style={{ ...styles, width: "100vw", height: "100vh", backgroundImage: "url(" + require("./assets/mainBG.webp").default + ")", backgroundSize: "cover" }}>
<Layout style={{ backgroundColor: "rgba(0, 0, 0, 0)" }}>
<Sider
className={this.state.mobileBreakpoint ? "mobileSider" : ""}
breakpoint="md"
collapsedWidth={0}
onBreakpoint={(broken) => { broken ? this.setState({ mobileBreakpoint: true }) : this.setState({ mobileBreakpoint: false }) }}
style={{ boxShadow: "5px 0px 6px 3px rgba(0, 0, 0, .5)" }}
>
<div className="overflow-handle">
<div style={{ height: "9ch", padding: "15px", display: "flex", alignItems: "center", justifyItems: "center" }}>
<img alt="Sieberrsec Logo" src={require("./assets/sieberrsec_ctf.svg").default} style={{ width: "100%", height: "100%", marginRight: "1vw" }}></img>
</div>
<Dropdown overlay={
<Menu>
{this.state.team != "teams-disabled" && this.state.team != "loading" && (
<div>
<Menu.Item key="Team">
<NavLink to="/Team">
<span>
<b style={{ color: "#d89614" }}><u>{this.state.team ? this.state.team : "No Team"}</u></b>
<br />{this.state.team ? "Manage Team " : "Create/Join a Team "}
</span>
<TeamOutlined />
</NavLink>
</Menu.Item>
<Menu.Divider />
</div>
)}
<Menu.Item key="Profile">
<NavLink to="/Profile">
<span>Profile </span>
<UserOutlined />
</NavLink>
</Menu.Item>
<Menu.Item key="Settings">
<NavLink to="/Settings">
<span>Settings </span>
<SettingOutlined />
</NavLink>
</Menu.Item>
<Menu.Divider />
<Menu.Item key="logout" onClick={() => {
confirm({
title: 'Are you sure you want to logout?',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.handleLogout(); close(); },
onCancel: () => { },
});
}}>
<span style={{ color: "#d32029" }}>Logout <LogoutOutlined /></span>
</Menu.Item>
</Menu>}
trigger={['click']}>
<div className="buttonHover"
style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignContent: "center", alignItems: "center", height: "13ch", cursor: "pointer", paddingLeft: "2ch", marginBottom: "2vh" }}>
<div style={{ display: "flex", flexDirection: "row", justifyContent: "center", alignContent: "center", alignItems: "center", marginBottom: "1vh" }}>
<h3 style={{ marginRight: "1vw", fontSize: "2.3ch" }}>{this.state.username}</h3>
<Avatar size="large" src={"/static/profile/" + this.state.username + ".webp"} />
</div>
<div>
<h3 style={{ color: "#d89614", fontSize: "2.3ch" }}>{this.state.team !== "teams-disabled" && this.state.team != "loading" && this.state.team ? <b>Team Score:</b> : <b>Score:</b>} {this.state.userScore}</h3>
</div>
</div>
</Dropdown>
<Menu
selectedKeys={[this.state.current]}
onSelect={(selection) => { this.setState({ current: selection.key }) }}
mode="inline"
theme="dark"
> {/*
defaultSelectedKeys - default selected menu items
defaultOpenKeys - default opened sub menus
inline - Sidebar Menu
*/}
<Menu.Item key="" className="menu-item">
<NavLink to="/">
<HomeTwoTone className="menu-item-icon" />
<span>Home</span>
</NavLink>
</Menu.Item>
<Menu.Item key="Challenges" className="menu-item">
<NavLink to="/Challenges">
<FlagTwoTone className="menu-item-icon" />
<span>Challenges</span>
</NavLink>
</Menu.Item>
<Menu.Item key="Scoreboard" className="menu-item">
<NavLink to="/Scoreboard">
<FundTwoTone className="menu-item-icon" />
<span>Scoreboard</span>
</NavLink>
</Menu.Item>
<Menu.Divider />
{this.state.permissions === 1 && (
<Menu.Item key="CreateChallenge" className="menu-item">
<NavLink to="/CreateChallenge">
<PlusSquareTwoTone className="menu-item-icon" twoToneColor="#d89614" />
<span>Create Challenge</span>
</NavLink>
</Menu.Item>
)}
{this.state.permissions === 2 && (
<Menu.Item key="Admin" className="menu-item">
<NavLink to="/Admin">
<CodeTwoTone className="menu-item-icon" twoToneColor="#d32029" />
<span>Admin Panel</span>
</NavLink>
</Menu.Item>
)}
</Menu>
<div style={{ textAlign: "center", marginTop: "3ch", color: "#8c8c8c" }}>
<p>Sieberrsec CTF Platform {ctfxVersion} <a href="https://github.com/IRS-Cybersec/ctf_platform" target="_blank">Contribute <GithubOutlined /></a></p>
</div>
</div>
</Sider>
<Content style={{ height: "100vh", position: "static", overflow: "hidden", margin: "17.5px" }}>
<Route
render={({ location, ...rest }) => (
<Transition
native
items={location.pathname.split("/")[1]}
trail={5}
key={location.pathname.split("/")[1]}
from={{ opacity: 0 }}
enter={{ opacity: 1 }}
leave={{ opacity: 0, display: "none" }}>
{(style, loc) => (
<animated.div style={{ ...style, height: "95vh", overflowY: "auto", backgroundColor: "rgba(0, 0, 0, 0.7)", border: "5px solid transparent", borderRadius: "20px" }}>
<Suspense fallback={<div style={{ height: "100%", width: "100%", display: "flex", justifyContent: "center", alignItems: "center", zIndex: 15 }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</div>}>
<Switch>
<Route exact path='/' render={(props) => <Home {...props} transition={style} />} />
<Route path='/Challenges/:categoryChall?' render={(props) => <Challenges {...props} permissions={this.state.permissions} transition={style} obtainScore={this.obtainScore.bind(this)} username={this.state.username} team={this.state.team} />} />
<Route exact path='/Scoreboard' render={(props) => <Scoreboard {...props} handleWebSocket={this.handleWebSocket.bind(this)} transition={style} scoreboardSocket={this.state.scoreboardSocket} />} />
<Route exact path='/Settings' render={(props) => <Settings {...props} transition={style} logout={this.handleLogout.bind(this)} username={this.state.username} />} />
<Route exact path='/Profile/:user?' render={(props) => <Profile {...props} transition={style} username={this.state.username} key={window.location.pathname} />} />
<Route exact path='/Team/:team?' render={(props) => <Teams {...props} transition={style} key={window.location.pathname} team={this.state.team} setTeam={this.setTeam.bind(this)} obtainScore={this.obtainScore.bind(this)} />} />
<Route exact path='/Team/join/:code' render={(props) => <Teams {...props} transition={style} key={window.location.pathname} team={this.state.team} setTeam={this.setTeam.bind(this)} obtainScore={this.obtainScore.bind(this)} />} />
{this.state.permissions >= 1 ? (
<Route exact path='/CreateChallenge' render={(props) => <UserChallengeCreate {...props} transition={style} />} />
) : (
<Route path='/Oops' render={(props) => { <Oops {...props} transition={style} /> }} />
)}
{this.state.permissions === 2 ? (
<Route path={['/Admin/:tabPane?']} render={(props) => <Admin {...props} transition={style} />} />
) : (
<Route path='/Oops' render={(props) => <Oops {...props} transition={style} />} />
)}
<Route path='/*' render={(props) => <Oops {...props} transition={style} />} />
</Switch>
</Suspense>
</animated.div>
)}
</Transition>
)}
/>
</Content>
</Layout>
</animated.div>
)
}
else {
if (!this.state.loading && !item && !this.state.token) {
return (
<animated.div style={{ ...styles, position: "absolute" }}>
<Suspense fallback={<div className="loading-style">
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</div>}>
<Login handleLogin={this.handleLogin.bind(this)}></Login>
</Suspense>
</animated.div>)
}
else {
return (
<animated.div style={{ ...styles, position: "absolute", height: "100vh", width: "100vw", display: "flex", justifyContent: "center", alignItems: "center", backgroundColor: "rgba(0, 0, 0, 0.95)" }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</animated.div>
)
}
}
}
}
</Transition>
</div >
);
}
