react-icons/fa#FaCartArrowDown JavaScript Examples

The following examples show how to use react-icons/fa#FaCartArrowDown. 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: productItem.js    From next-ecommerce with MIT License 4 votes vote down vote up
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 #2
Source File: [id].js    From next-ecommerce with MIT License 4 votes vote down vote up
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>
  );
}