react-icons/fa#FaCog JavaScript Examples
The following examples show how to use
react-icons/fa#FaCog.
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: Settings.js From sailplane-web with GNU General Public License v3.0 | 6 votes |
|
export function Settings({sharedFS}) {
return (
<div style={styles.container}>
<UserHeader
sharedFS={sharedFS}
title={'Settings'}
iconComponent={FaCog}
/>
</div>
);
}
Example #2
| Source File: Toolbar.js From dm2 with Apache License 2.0 | 5 votes |
|
Toolbar = observer(({ view, history, lsf, isLabelStream, hasInstruction }) => {
const annotation = lsf?.annotationStore?.selected;
const task = view.dataStore.selected;
const { viewingAllAnnotations, viewingAllPredictions } =
lsf?.annotationStore ?? {};
const viewAll = viewingAllAnnotations || viewingAllPredictions;
return lsf?.noTask === false && task ? (
<Block name="label-toolbar" mod={{ labelStream: isLabelStream }}>
<Elem name="task">
<Space size="large">
<div style={{ display: "flex", alignItems: "center" }}>
<History history={history}>
<div style={{ margin: history ? "0 10px" : 0 }}>
Task #{task.id}
</div>
</History>
</div>
{!viewAll && <LSFOperations history={annotation?.history} />}
</Space>
</Elem>
{!!lsf && !!annotation && annotation.type === "annotation" && (
<Elem name="actions">
{!viewAll && (
<SubmissionButtons
lsf={lsf}
annotation={annotation}
isLabelStream={isLabelStream}
disabled={lsf.isLoading}
/>
)}
<Elem name="tools">
<Space>
{hasInstruction && (
<Tooltip title="Labeling Instructions">
<Button
look={lsf.showingDescription ? "primary" : "dashed"}
icon={<Icon icon={FaInfoCircle} />}
onClick={() => lsf.toggleDescription()}
/>
</Tooltip>
)}
<Tooltip title="Settings">
<Button
look="dashed"
icon={<Icon icon={FaCog} />}
onClick={() => lsf.toggleSettings()}
/>
</Tooltip>
</Space>
</Elem>
</Elem>
)}
</Block>
) : null;
})
Example #3
| Source File: Navbar.jsx From Socialgram with Apache License 2.0 | 5 votes |
|
ListItems = () => {
const links = [
{
name: "Home",
icon: <FaHome />,
link: "/homepage",
},
{
name: "Profile",
icon: <FaUserAlt />,
link: "/homepage/profile",
},
{
name: "My Post",
icon: <FaStickyNote />,
link: "/homepage/myposts",
},
{
name: "Settings",
icon: <FaCog />,
link: "/homepage/settings",
},
];
return (
<div class="dropdown dropstart">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton2"
data-bs-toggle="dropdown"
aria-expanded="false"
>
{/* Dropdown button */}
<HiMenuAlt3 />
</button>
<ul
class="dropdown-menu dropdown-menu-dark"
aria-labelledby="dropdownMenuButton2"
>
{links.map((item, idx) => (
<li key={idx}>
<NavLink to={item.link} end={true} className="dropdown-item">
{/* {item.icon} */}
<span className="ms-3">{item.name}</span>
</NavLink>
</li>
))}
<li>
<hr className="dropdown-divider" />
</li>
<li>
<a
href="!#"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
class="dropdown-item"
>
Logout
</a>
</li>
</ul>
</div>
);
}
Example #4
| Source File: SideNav.jsx From Socialgram with Apache License 2.0 | 5 votes |
|
SideNav = () => {
const links = [
{
name: "Home",
icon: <FaHome />,
link: "/homepage",
},
{
name: "Profile",
icon: <FaUserAlt />,
link: "/homepage/profile",
},
{
name: "My Post",
icon: <FaStickyNote />,
link: "/homepage/myposts",
},
{
name: "Settings",
icon: <FaCog />,
link: "/homepage/settings",
},
];
return (
<React.Fragment>
<div className="col-sm-3 sidenav">
<ul className="list-group list-group-flush">
{links.map((item, idx) => (
<li
className="list-group-item list-group-item-action list-group-item-dark"
key={idx}
>
<NavLink to={item.link} end={true}>
{item.icon}
<span className="ms-3">{item.name}</span>
</NavLink>
</li>
))}
<li className="list-group-item list-group-item-action list-group-item-dark">
<a href="!#" data-bs-toggle="modal" data-bs-target="#exampleModal">
<FaSignOutAlt className="me-3" /> Logout
</a>
</li>
</ul>
</div>
<Modal />
</React.Fragment>
);
}
Example #5
| Source File: Profile.js From devagram with GNU General Public License v3.0 | 4 votes |
|
function Profile() {
return (
<div style={{ paddingTop: "4rem" }}>
<Navbar />
<div className={classes.Profile}>
<div
style={{
display: "flex",
justifyContent: "space-around",
margin: "18px 0px",
borderBottom: "1px solid black",
}}
>
<div>
<img
style={{
height: "10rem",
width: "10rem",
borderRadius: "5rem",
}}
src="https://images.unsplash.com/photo-1569466896818-335b1bedfcce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
alt="post1"
/>
</div>
<div>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-around",
}}
>
<h2>Darshil Patel</h2>
<FaCog />
</div>
<div style={{ width: "auto" }}>
<Button btnType="EditProfile" children="Edit Profile" />
</div>
<div
style={{
marginTop: "20px",
display: "flex",
justifyContent: "space-between",
width: "100%",
marginRight: "10px",
}}
>
<p>
{" "}
<b>40</b> Posts
</p>
<p>
{" "}
<b>40</b> Followers
</p>
<p>
{" "}
<b>40</b> Following
</p>
</div>
<br />
<div className={classes.bio}>
<h5>MERN stack developer</h5>
<h5>Ex-Amazon,Ex-Hotstar</h5>
</div>
</div>
</div>
<div className={classes.gallery}>
<img
className={classes.image}
src="https://images.unsplash.com/photo-1574694413209-16c197d7bd61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
alt="post2"
/>
<img
className={classes.image}
src="https://images.unsplash.com/photo-1584307833174-a3bbb76ab367?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
alt="post3"
/>
<img
className={classes.image}
src="https://images.unsplash.com/photo-1552985247-03b1fddb53d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
alt="post4"
/>
<img
className={classes.image}
src="https://images.unsplash.com/photo-1574694413209-16c197d7bd61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
alt="post5"
/>
<img
className={classes.image}
src="https://images.unsplash.com/photo-1584307833174-a3bbb76ab367?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
alt="post6"
/>
<img
className={classes.image}
src="https://images.unsplash.com/photo-1552985247-03b1fddb53d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
alt="post7"
/>
<img
className={classes.image}
src="https://images.unsplash.com/photo-1574694413209-16c197d7bd61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
alt="post8"
/>
<img
className={classes.image}
src="https://images.unsplash.com/photo-1584307833174-a3bbb76ab367?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
alt="post9"
/>
<img
className={classes.image}
src="https://images.unsplash.com/photo-1552985247-03b1fddb53d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
alt="post10"
/>
</div>
</div>
</div>
);
}
