Create image component

2 files changed, 12 insertions, 7 deletions

diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js
index 64847de9..9958a7bb 100644
--- a/src/pages/shop/cart.js
+++ b/src/pages/shop/cart.js
@@ -7,14 +7,12 @@ import ChevronLeftIcon from "../../icons/chevron-left.svg";
 import MinusIcon from "../../icons/minus.svg";
 import PlusIcon from "../../icons/plus.svg";
 import TrashIcon from "../../icons/trash.svg";
-import { LazyLoadImage } from "react-lazy-load-image-component";
 import apiOdoo from "../../helpers/apiOdoo";
 import currencyFormat from "../../helpers/currencyFormat";
 import { createSlug } from "../../helpers/slug";
 import ConfirmAlert from "../../components/ConfirmAlert";
 import { toast } from "react-hot-toast";
-
-import 'react-lazy-load-image-component/src/effects/blur.css';
+import Image from "../../components/Image";
 
 export default function Cart() {
   const [products, setProducts] = useState([]);
@@ -179,7 +177,11 @@ export default function Cart() {
                   className={'p-2 rounded border-2 ' + (product.to_process ? 'border-yellow_r-9 bg-yellow_r-9' : 'border-gray_r-12')} 
                   onClick={() => toggleProductToProcess(product.id)}
                 ></button>
-                <LazyLoadImage effect="blur" src={product.parent.image ? product.parent.image : '/images/noimage.jpeg'} alt={product.parent.name} className="object-contain object-center border border-gray_r-6 h-32 w-full rounded-md" />
+                <Image
+                  src={product.parent.image} 
+                  alt={product.parent.name} 
+                  className="object-contain object-center border border-gray_r-6 h-32 w-full rounded-md"
+                />
               </div>
               <div className="w-8/12 flex flex-col">
                 <Link href={'/shop/product/' + createSlug(product.parent.name, product.parent.id)} className="product-card__title wrap-line-ellipsis-2">
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index 5e0c8853..b8d29d02 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -5,13 +5,12 @@ import Header from "../../../components/Header";
 import apiOdoo from "../../../helpers/apiOdoo";
 import { createSlug, getIdFromSlug } from "../../../helpers/slug";
 import currencyFormat from "../../../helpers/currencyFormat";
-import { LazyLoadImage } from "react-lazy-load-image-component";
-import "react-lazy-load-image-component/src/effects/blur.css";
 import ProductSlider from "../../../components/product/ProductSlider";
 import Layout from "../../../components/Layout";
 import { createOrUpdateItemCart } from "../../../helpers/cart";
 import toast from "react-hot-toast";
 import Footer from "../../../components/Footer";
+import Image from "../../../components/Image";
 
 export async function getServerSideProps( context ) {
   const { slug } = context.query;
@@ -103,7 +102,11 @@ export default function ProductDetail({ product }) {
     <>
       <Header title={`${product.name} - Indoteknik`}/>
       <Layout>
-        <LazyLoadImage effect="blur" src={product.image} alt={product.name} className="border-b border-gray_r-6 w-full h-[300px] object-contain object-center bg-white" />
+        <Image 
+          src={product.image}
+          alt={product.name}
+          className="border-b border-gray_r-6 w-full h-[300px] object-contain object-center bg-white"
+        />
         <div className="p-4 pb-10">
           <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)}>
             {product.manufacture.name ?? '-'}