react-icons/fa#FaSignOutAlt JavaScript Examples
The following examples show how to use
react-icons/fa#FaSignOutAlt.
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: index.js From FinDevs with MIT License | 5 votes |
|
function DevProfile({ dev, logout, handleHide }) {
return (
<>
<Container>
<img src={dev.avatar_url} alt={dev.github_user} />
<h1>{dev.name}</h1>
<a href={`http://github.com/${dev.github_user}`} target="blank">
<h3>
@
{dev.github_user}
</h3>
</a>
<p>{dev.bio}</p>
<DevTechs>
<p>
{ dev.techs ? dev.techs.join(', ') : 'Loading'}
</p>
</DevTechs>
<Buttons>
<div>
<button
onClick={() => {
alert('This feat is under construction for now!');
}}
>
<FaUserEdit />
</button>
<p>Edit Profile</p>
</div>
<div>
<button
onClick={handleHide}
>
<FaEyeSlash />
{' '}
</button>
<p>Hide Yourself</p>
</div>
<div>
<button
onClick={logout}
>
<FaSignOutAlt />
{' '}
</button>
<p>SignOut</p>
</div>
</Buttons>
</Container>
</>
);
}
Example #2
| 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 #3
| Source File: header-desktop.js From next-ecommerce with MIT License | 4 votes |
|
export default function HeaderDesktop({ viewer }) {
const cart = useQuery(CART_COUNT);
return (
<>
<div className="header header-top">
<Logo />
<SearchBox />
<div className="nav-buttons">
<Link href="/cart">
<a className="nav-buttons-items">
<FaShoppingCart color="#808080" />
<p>
<sup className="items-total">{cart.data.cart.cartCount}</sup>{' '}
Items
</p>
</a>
</Link>
<Link href="/wishlist">
<a className="nav-buttons-wishlist">
<FaRegHeart color="#808080" />
<p>Wishlist</p>
</a>
</Link>
{!viewer && (
<Link href="/user/login">
<a className="nav-buttons-signin">
<FaUser color="#808080" />
<p>Sign In</p>
</a>
</Link>
)}
{viewer && (
<>
<Link href="/profile">
<a className="nav-buttons-profile">
<FaUser color="#808080" />
<p>{viewer.name}</p>
</a>
</Link>
<Link href="/user/signout">
<a className="nav-buttons-signout">
<FaSignOutAlt />
</a>
</Link>
</>
)}
</div>
</div>
<div className="header header-bottom">
<div className="all-categories-box">
<FaBars color="#d8d8d8" />
<select name="categories" id="categories">
<option value="All Categories" selected>
All Categories
</option>
<option value="#">Desktop</option>
<option value="#">Smartphone</option>
<option value="#">Watches</option>
<option value="#">Games</option>
<option value="#">Laptop</option>
<option value="#">Keyboards</option>
<option value="#">TV & Video</option>
<option value="#">Accessories</option>
</select>
</div>
<nav className="main-nav">
<Link href="#">
<a>Super Deals</a>
</Link>
<Link href="#">
<a>Featured Brands</a>
</Link>
<Link href="#">
<a>Collections</a>
</Link>
<Link href="#">
<a>Bestselling</a>
</Link>
</nav>
<div className="settings">
<div className="menu-dropdown">
<p>Help</p>
</div>
<div className="menu-dropdown">
<p>USD</p>
</div>
<div className="menu-dropdown">
<p>Language</p>
</div>
</div>
</div>
<style jsx>{`
/* Header Top */
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 28px 10vw;
}
.nav-buttons {
display: flex;
flex-direction: row;
align-items: center;
}
.nav-buttons a {
display: flex;
flex-direction: row;
align-items: center;
margin-left: 32px;
font-style: normal;
font-weight: 500;
font-size: 14px;
text-decoration: none;
color: #808080;
}
.nav-buttons .items-total {
font-size: 12px;
align-self: flex-end;
}
.nav-buttons .nav-buttons-signout {
margin-left: 12px;
}
.nav-buttons a:hover {
text-decoration: underline;
}
.nav-buttons a p {
margin-left: 8px;
}
/* Header Bottom */
.header-bottom {
padding: 0px 10vw;
border-top: 2px solid #f5f5f5;
}
.header-bottom .all-categories-box {
height: 100%;
display: flex;
align-items: center;
/* Border */
border-right: 2px solid #f5f5f5;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 48px;
}
.header-bottom .all-categories-box select {
height: 100%;
padding-left: 15px;
font-family: Roboto;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 60px;
color: #808080;
border: none;
background: none;
}
.header-bottom .all-categories-box select:focus {
outline: none;
}
.header-bottom .main-nav {
display: flex;
align-items: center;
}
.header-bottom .main-nav a {
font-style: normal;
font-weight: 500;
font-size: 14px;
color: #666666;
text-decoration: none;
margin-left: 16px;
margin-right: 16px;
}
.header-bottom .main-nav a:hover {
text-decoration: underline;
}
.header-bottom .settings {
display: flex;
flex-direction: row;
align-items: center;
}
.header-bottom .settings .menu-dropdown {
/* Border */
border-left: 2px solid #f5f5f5;
padding: 20px 24px;
}
.header-bottom .settings .menu-dropdown p {
font-style: normal;
font-weight: 500;
font-size: 14px;
color: #b3b3b3;
}
`}</style>
</>
);
}
