diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Image.js | 13 | ||||
| -rw-r--r-- | src/components/ManufactureCard.js | 9 | ||||
| -rw-r--r-- | src/components/ProductCard.js | 10 |
3 files changed, 25 insertions, 7 deletions
diff --git a/src/components/Image.js b/src/components/Image.js new file mode 100644 index 00000000..f06272b0 --- /dev/null +++ b/src/components/Image.js @@ -0,0 +1,13 @@ +import { LazyLoadImage } from "react-lazy-load-image-component"; +import 'react-lazy-load-image-component/src/effects/blur.css'; + +export default function Image({ src, alt, className = "" }) { + return ( + <LazyLoadImage + effect="blur" + src={src || '/images/noimage.jpeg'} + alt={src ? alt : 'Image Not Found - Indoteknik'} + className={className} + /> + ); +}
\ No newline at end of file diff --git a/src/components/ManufactureCard.js b/src/components/ManufactureCard.js index 6b96a852..52a964d5 100644 --- a/src/components/ManufactureCard.js +++ b/src/components/ManufactureCard.js @@ -1,6 +1,5 @@ -import { LazyLoadImage } from "react-lazy-load-image-component"; -import "react-lazy-load-image-component/src/effects/blur.css"; import { createSlug } from "../helpers/slug"; +import Image from "./Image"; import Link from "./Link"; export default function ManufactureCard({ data }) { @@ -8,7 +7,11 @@ export default function ManufactureCard({ data }) { return ( <Link href={`/shop/brands/${createSlug(manufacture.name, manufacture.id)}`} className="flex justify-center items-center border border-gray-300 p-1 rounded h-16 text-gray-800 text-sm text-center bg-white"> {manufacture.logo ? ( - <LazyLoadImage effect="blur" src={manufacture.logo} alt={manufacture.name || ''} className="w-full max-h-full object-contain object-center" /> + <Image + src={manufacture.logo} + alt={manufacture.name} + className="w-full max-h-full object-contain object-center" + /> ) : manufacture.name} </Link> ); diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js index b8967cc8..2cb0d99b 100644 --- a/src/components/ProductCard.js +++ b/src/components/ProductCard.js @@ -1,10 +1,8 @@ import Link from "./Link"; import currencyFormat from "../helpers/currencyFormat"; import { createSlug } from "../helpers/slug"; -import { LazyLoadImage } from "react-lazy-load-image-component"; import { ChevronRightIcon } from "@heroicons/react/20/solid"; - -import 'react-lazy-load-image-component/src/effects/blur.css'; +import Image from "./Image"; export default function ProductCard({ data }) { @@ -12,7 +10,11 @@ export default function ProductCard({ data }) { return ( <div className="product-card"> <Link href={'/shop/product/' + createSlug(product.name, product.id)} className="block relative bg-white"> - <LazyLoadImage effect="blur" src={product.image ? product.image : '/images/noimage.jpeg'} alt={product.name} className="product-card__image" /> + <Image + src={product.image} + alt={product.name} + className="product-card__image" + /> {product.variant_total > 1 ? ( <div className="absolute bottom-2 left-2 badge-gray">{product.variant_total} Varian</div> ) : ''} |