@fortawesome/free-solid-svg-icons#faClipboardList JavaScript Examples

The following examples show how to use @fortawesome/free-solid-svg-icons#faClipboardList. 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: Footer.js    From amazon-next with MIT License 5 votes vote down vote up 
export default function Footer() {
    return (
        <footer className="lg:hidden bg-white fixed bottom-0 right-0 w-full shadow-lg py-4 px-5">
            <nav>
                <ul className="flex flex-row w-full justify-between">
                    <li>
                        <Link href="/">
                            <>
                                <FontAwesomeIcon
                                    icon={faClipboardList}
                                    size="lg"
                                    className="text-gray-800"
                                />
                            </>
                        </Link>
                    </li>{' '}
                    <li>
                        <Link href="/cart">
                            <>
                                <FontAwesomeIcon
                                    icon={faShoppingBag}
                                    size="lg"
                                    className="text-gray-800"
                                />
                            </>
                        </Link>
                    </li>
                    <li>
                        <Link href="/likes">
                            <>
                                <FontAwesomeIcon
                                    icon={faHeart}
                                    size="lg"
                                    className="text-gray-800"
                                />
                            </>
                        </Link>
                    </li>
                </ul>
            </nav>
        </footer>
    );
}
Example #2
Source File: LateralMenu.js    From amazon-next with MIT License 5 votes vote down vote up 
export default function LateralMenu() {
    const productsAmount = useSelector(state => state.cart.products.length);
    const likesAmount = useSelector(state => state.user.likedProducts.length);
    return (
        <div className="hidden py-8 lg:flex flex-col justify-between items-center h-full shadow-lg">
            <Link href="/">
                <img
                    src="/static/amazon.png"
                    alt="Amazon"
                    aria-label="Amazon"
                    className="w-8 h-8 mb-8 rounded-full cursor-pointer"
                />
            </Link>

            <nav>
                <ul>
                    <nav>
                        <ul>
                            <li className="mb-8">
                                <Link href="/">
                                    <div>
                                        <FontAwesomeIcon
                                            icon={faClipboardList}
                                            size="lg"
                                            className="text-gray-500 cursor-pointer transition-colors hover:text-gray-600 duration-500 ease-in-out"
                                        />
                                    </div>
                                </Link>
                            </li>{' '}
                            <li className="mb-8 relative">
                                <Link href="/cart">
                                    <div>
                                        <FontAwesomeIcon
                                            icon={faShoppingBag}
                                            size="lg"
                                            className="text-gray-500 cursor-pointer transition-colors hover:text-gray-600 duration-500 ease-in-out"
                                        />
                                    </div>
                                </Link>
                                <div className="bg-yellow-burn flex items-center text-white font-bold w-4 h-4 rounded-full p-1 absolute top-0 left-60p text-2xs">
                                    {productsAmount}
                                </div>
                            </li>
                            <li className="mt-8 relative">
                                <Link href="/likes">
                                    <div>
                                        <FontAwesomeIcon
                                            icon={faHeart}
                                            size="lg"
                                            className="text-gray-500 cursor-pointer transition-colors hover:text-gray-600 duration-500 ease-in-out"
                                        />
                                    </div>
                                </Link>
                                <div className="bg-yellow-burn flex items-center text-white font-bold w-4 h-4 rounded-full p-1 absolute top-0 left-60p text-2xs">
                                    {likesAmount}
                                </div>
                            </li>
                        </ul>
                    </nav>
                </ul>
            </nav>

            <img
                src="/static/user.jpg"
                alt="Profile"
                className="w-8 h-8 rounded-full"
            />
        </div>
    );
}