diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/header.js | 7 | ||||
| -rw-r--r-- | src/components/productCard.js | 6 |
2 files changed, 9 insertions, 4 deletions
diff --git a/src/components/header.js b/src/components/header.js index baebbd3a..3d5d0f84 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -3,6 +3,7 @@ import Link from "next/link"; import ShoppingCartIcon from "../icons/shopping-cart.svg"; import SearchIcon from "../icons/search.svg"; import MenuIcon from "../icons/menu.svg"; +import ChevronRightIcon from "../icons/chevron-right.svg"; import { useState } from "react"; @@ -23,19 +24,19 @@ export default function Header() { <Link className="flex w-full font-normal text-gray-800" href="/shop/brands"> <span>Brand</span> <div className="ml-auto"> - <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="stroke-gray-700 feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg> + <ChevronRightIcon className="stroke-gray-700" /> </div> </Link> <Link className="flex w-full font-normal text-gray-800" href="/blog"> <span>Blog</span> <div className="ml-auto"> - <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="stroke-gray-700 feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg> + <ChevronRightIcon className="stroke-gray-700" /> </div> </Link> <button className="flex w-full font-normal text-gray-800" id="open_category_parent_menu"> <span>Kategori</span> <div className="ml-auto"> - <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="stroke-gray-700 feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg> + <ChevronRightIcon className="stroke-gray-700" /> </div> </button> </div> diff --git a/src/components/productCard.js b/src/components/productCard.js index 6e703670..f51473ad 100644 --- a/src/components/productCard.js +++ b/src/components/productCard.js @@ -1,13 +1,17 @@ import Link from "next/link"; import currencyFormat from "../helpers/currencyFormat"; import { createSlug } from "../helpers/slug"; +import { LazyLoadImage } from "react-lazy-load-image-component"; + +import 'react-lazy-load-image-component/src/effects/blur.css'; + export default function productCard({ data }) { let product = data; return ( <div className="product-card"> <Link href={'/shop/product/' + createSlug(product.name, product.id)} className="block"> - <img src={product.image ? product.image : '/images/noimage.jpeg'} alt={product.name} className="product-card__image" loading="lazy" /> + <LazyLoadImage effect="blur" src={product.image ? product.image : '/images/noimage.jpeg'} alt={product.name} className="product-card__image" /> </Link> <div className="product-card__description"> <div> |