react-icons/fa#FaRegHeart JavaScript Examples
The following examples show how to use
react-icons/fa#FaRegHeart.
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: 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>
</>
);
}
Example #2
| Source File: productItem.js From next-ecommerce with MIT License | 4 votes |
|
export default function ProductSection({ id, name, rating, img_url, price }) {
const cart = useQuery(CART);
const wishlist = useQuery(WISHLIST);
return (
<article>
<div className="top-buttons">
<button className="add-wishlist" onClick={() => toggleWishlist(id)}>
{wishlist.data.wishlist.products.includes(id) && (
<FaHeart size={20} color="#D8D8D8" />
)}
{!wishlist.data.wishlist.products.includes(id) && (
<FaRegHeart size={20} color="#D8D8D8" />
)}
</button>
</div>
<div className="product-img-box">
<Link href={`/product/${id}`}>
<img className="product-img" src={img_url} />
</Link>
</div>
<Link href={`/product/${id}`}>
<a className="product-name">{name}</a>
</Link>
<div className="rating">
<StarRatings
rating={parseFloat(rating)}
starRatedColor="#F9AD3D"
numberOfStars={5}
name="rating"
starDimension="20px"
starSpacing="1px"
/>
</div>
<div className="price">
<p className="price-value">${price}</p>
<button className="add-cart" onClick={() => toggleCart(id)}>
{cart.data.cart.products.includes(id) && (
<FaCartArrowDown size={18} color="#D8D8D8" />
)}
{!cart.data.cart.products.includes(id) && (
<FaCartPlus size={18} color="#D8D8D8" />
)}
</button>
</div>
<style jsx>{`
article {
display: flex;
align-items: center;
flex-direction: column;
box-sizing: border-box;
height: 100%;
padding: 24px;
background: white;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);
border-radius: 6px;
}
.top-buttons {
margin-bottom: 24px;
align-self: flex-end;
}
.top-buttons .add-wishlist {
background: none;
border: none;
}
.top-buttons .add-wishlist:focus {
outline: none;
}
.product-img-box {
margin-bottom: 28px;
}
.product-img {
width: 225px;
height: 160px;
object-fit: contain;
}
.product-name {
width: 80%;
line-height: 20px;
text-decoration: none;
font-weight: 500;
font-size: 14px;
text-align: center;
color: #666666;
margin-bottom: 18px;
}
.product-name:hover {
text-decoration: underline;
font-weight: 600;
}
.rating {
margin-bottom: 24px;
}
.price {
display: flex;
align-items: center;
font-weight: 900;
font-size: 16px;
color: #666666;
}
.price .add-cart {
background: none;
border: none;
margin-left: 5px;
}
.price .add-cart:focus {
outline: none;
}
`}</style>
</article>
);
}
Example #3
| Source File: [id].js From next-ecommerce with MIT License | 4 votes |
|
export default function Home() {
const router = useRouter();
const { id } = router.query;
const cart = useQuery(CART);
const wishlist = useQuery(WISHLIST);
const { data, loading, error } = useQuery(PRODUCTS_BY_IDS, {
variables: {
id,
},
});
if ((error || !data?.productsById.length) && !loading) {
return (
<Page title="Quantum E-commerce - Products">
<ErrorAlert message="This product is not found!"></ErrorAlert>
</Page>
);
} else if (loading) {
return (
<Page title="Quantum E-commerce - Products">
<p>Loading...</p>
</Page>
);
}
return (
<Page title="Quantum E-commerce - Products">
<article>
<div className="top-buttons">
<button
className="add-wishlist"
onClick={() => toggleWishlist(data.productsById[0].id)}
>
{wishlist.data.wishlist.products.includes(
data.productsById[0].id
) && <FaHeart size={20} color="#D8D8D8" />}
{!wishlist.data.wishlist.products.includes(
data.productsById[0].id
) && <FaRegHeart size={20} color="#D8D8D8" />}
</button>
</div>
<div className="product-img-box">
<img className="product-img" src={data.productsById[0].img_url} />
</div>
<h1 className="product-name">{data.productsById[0].name}</h1>
<h3 className="product-description">
{data.productsById[0].description}
</h3>
<div className="rating">
<StarRatings
rating={parseFloat(data.productsById[0].rating)}
starRatedColor="#F9AD3D"
numberOfStars={5}
name="rating"
starDimension="20px"
starSpacing="1px"
/>
</div>
<div className="price">
<p className="price-value">${data.productsById[0].price}</p>
<button
className="add-cart"
onClick={() => toggleCart(data.productsById[0].id)}
>
{cart.data.cart.products.includes(data.productsById[0].id) && (
<FaCartArrowDown size={24} color="#D8D8D8" />
)}
{!cart.data.cart.products.includes(data.productsById[0].id) && (
<FaCartPlus size={24} color="#D8D8D8" />
)}
</button>
</div>
<style jsx>{`
article {
display: flex;
align-items: center;
flex-direction: column;
box-sizing: border-box;
height: 100%;
width: 100%;
padding: 24px;
background: white;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);
border-radius: 6px;
}
.top-buttons {
margin-bottom: 24px;
align-self: flex-end;
}
.top-buttons .add-wishlist {
background: none;
border: none;
}
.top-buttons .add-wishlist:focus {
outline: none;
}
.product-img-box {
margin-bottom: 28px;
}
.product-img {
width: 320px;
height: 230px;
object-fit: contain;
}
.product-name {
width: 80%;
line-height: 20px;
text-decoration: none;
font-weight: 500;
font-size: 22px;
text-align: center;
color: #666666;
margin-bottom: 28px;
}
.product-description {
width: 40%;
line-height: 22px;
text-decoration: none;
font-weight: 400;
font-size: 14px;
text-align: center;
color: #666666;
margin-bottom: 24px;
}
.rating {
margin-bottom: 18px;
}
.price {
display: flex;
align-items: center;
font-weight: 900;
font-size: 20px;
color: #666666;
margin-bottom: 20px;
}
.price .add-cart {
background: none;
border: none;
margin-left: 5px;
}
.price .add-cart:focus {
outline: none;
}
@media (max-width: 1000px) {
.product-img {
width: 225px;
height: 180px;
margin-bottom: 28px;
}
.product-name {
width: 80%;
line-height: 20px;
text-decoration: none;
font-weight: 500;
font-size: 18px;
text-align: center;
color: #666666;
margin-bottom: 18px;
}
.product-description {
width: 80%;
line-height: 22px;
text-decoration: none;
font-weight: 400;
font-size: 14px;
text-align: center;
color: #666666;
margin-bottom: 18px;
}
}
`}</style>
</article>
</Page>
);
}
