react-icons/fa#FaLongArrowAltRight JavaScript Examples
The following examples show how to use
react-icons/fa#FaLongArrowAltRight.
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: cart.js From jamstack-ecommerce with MIT License | 5 votes |
|
Cart = ({ context }) => {
const { numberOfItemsInCart, cart, removeFromCart, total } = context
const cartEmpty = numberOfItemsInCart === Number(0)
return (
<>
<CartLink />
<div className="flex flex-col items-center pb-10">
<div className="
flex flex-col w-full
c_large:w-c_large
">
<div className="pt-10 pb-8">
<h1 className="text-5xl font-light">Your Cart</h1>
</div>
{
cartEmpty ? (
<h3>No items in cart.</h3>
) : (
<div className="flex flex-col">
<div className="">
{
cart.map((item) => {
return (
<div className="border-b py-10" key={item.id}>
<div className="flex items-center">
<Link to={slugify(item.name)}>
<Image className="w-32 m-0" src={item.image} alt={item.name} />
</Link>
<Link to={slugify(item.name)}>
<p className="m-0 pl-10 text-gray-600 text-sm">
{item.name}
</p>
</Link>
<div className="flex flex-1 justify-end">
<p className="m-0 pl-10 text-gray-900 tracking-tighter font-semibold">
{DENOMINATION + item.price}
</p>
</div>
<div role="button" onClick={() => removeFromCart(item)} className="m-0 ml-10 text-gray-900 text-s cursor-pointer">
<FaTimes />
</div>
</div>
</div>
)
})
}
</div>
</div>
)
}
<div className="flex flex-1 justify-end py-8">
<p className="text-sm pr-10">Total</p>
<p className="font-semibold tracking-tighter">{DENOMINATION + total}</p>
</div>
{!cartEmpty && (
<Link to="/checkout" className="flex flex-1 justify-end">
<div className="cursor-pointer flex">
<p className="text-gray-600 text-sm mr-2">Proceed to check out</p>
<FaLongArrowAltRight className="text-gray-600 mt-1" />
</div>
</Link>
)}
</div>
</div>
</>
)
}
Example #2
| Source File: cart.js From jamstack-ecommerce with MIT License | 4 votes |
|
Cart = ({ context }) => {
const {
numberOfItemsInCart, cart, removeFromCart, total, setItemQuantity
} = context
const cartEmpty = numberOfItemsInCart === Number(0)
function increment(item) {
item.quantity = item.quantity + 1
setItemQuantity(item)
}
function decrement(item) {
if (item.quantity === 1) return
item.quantity = item.quantity - 1
setItemQuantity(item)
}
return (
<>
<CartLink />
<div className="flex flex-col items-center pb-10">
<div className="
flex flex-col w-full
c_large:w-c_large
">
<div className="pt-10 pb-8">
<h1 className="text-5xl font-light">Your Cart</h1>
</div>
{
cartEmpty ? (
<h3>No items in cart.</h3>
) : (
<div className="flex flex-col">
<div className="">
{
cart.map((item) => {
return (
<div className="border-b py-10" key={item.id}>
{ /* Responsive - Desktop */}
<div className="flex items-center hidden md:flex">
<Link to={slugify(item.name)}>
<Image className="w-32 m-0" src={item.image} alt={item.name} />
</Link>
<Link to={slugify(item.name)}>
<p className="
m-0 pl-10 text-gray-600 text-sm w-56
">
{item.name}
</p>
</Link>
<div className="ml-4">
<QuantityPicker
numberOfitems={item.quantity}
increment={() => increment(item)}
decrement={() => decrement(item)}
/>
</div>
<div className="flex flex-1 justify-end">
<p className="m-0 pl-10 text-gray-900 tracking-tighter font-semibold">
{DENOMINATION + item.price}
</p>
</div>
<div role="button" onClick={() => removeFromCart(item)} className="
m-0 ml-10 text-gray-900 text-s cursor-pointer
">
<FaTimes />
</div>
</div>
{ /* Responsive - Mobile */}
<div className="flex items-center flex md:hidden">
<Link to={slugify(item.name)}>
<Image className="w-32 m-0" src={item.image} alt={item.name} />
</Link>
<div>
<Link to={slugify(item.name)}>
<p className="
m-0 pl-6 text-gray-600 text-base
">
{item.name}
</p>
</Link>
<div className="ml-6 mt-4 mb-2">
<QuantityPicker
hideQuantityLabel
numberOfitems={item.quantity}
increment={() => increment(item)}
decrement={() => decrement(item)}
/>
</div>
<div className="flex flex-1">
<p className="text-lg m-0 pl-6 pt-4 text-gray-900 tracking-tighter font-semibold">
{DENOMINATION + item.price}
</p>
</div>
</div>
<div role="button" onClick={() => removeFromCart(item)} className="
m-0 ml-10 text-gray-900 text-s cursor-pointer mr-2
">
<FaTimes />
</div>
</div>
</div>
)
})
}
</div>
</div>
)
}
<div className="flex flex-1 justify-end py-8">
<p className="text-sm pr-10">Total</p>
<p className="font-semibold tracking-tighter">{DENOMINATION + total}</p>
</div>
{!cartEmpty && (
<Link to="/checkout" className="flex flex-1 justify-end">
<div className="cursor-pointer flex">
<p className="text-gray-600 text-sm mr-2">Proceed to check out</p>
<FaLongArrowAltRight className="text-gray-600 mt-1" />
</div>
</Link>
)}
</div>
</div>
</>
)
}
