Create image component

6 files changed, 51 insertions, 21 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>
         ) : ''}
diff --git a/src/pages/index.js b/src/pages/index.js
index f064d6ef..511f2ecd 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,18 +1,21 @@
 import { useEffect, useState } from "react";
-import { LazyLoadImage } from "react-lazy-load-image-component";
-import { Swiper, SwiperSlide } from "swiper/react";
 import { Pagination, Autoplay } from "swiper";
-import Header from "../components/Header";
-import apiOdoo from "../helpers/apiOdoo";
-import "react-lazy-load-image-component/src/effects/blur.css";
+import axios from "axios";
+import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import "swiper/css/pagination";
 import "swiper/css/autoplay";
+
+// Helpers
+import apiOdoo from "../helpers/apiOdoo";
+
+// Components
+import Header from "../components/Header";
 import ProductSlider from "../components/product/ProductSlider";
 import Layout from "../components/Layout";
-import axios from "axios";
 import ManufactureCard from "../components/ManufactureCard";
 import Footer from "../components/Footer";
+import Image from "../components/Image";
 
 export async function getServerSideProps() {
   const heroBanners = await apiOdoo('GET', `/api/v1/banner?type=index-a-1`);
@@ -53,7 +56,11 @@ export default function Home({ heroBanners }) {
           {
             heroBanners?.map((banner, index) => (
               <SwiperSlide key={index}>
-                <LazyLoadImage effect="blur" src={banner.image} alt={banner.name} className="w-full h-auto" />
+                <Image
+                  src={banner.image} 
+                  alt={banner.name} 
+                  className="w-full h-auto"
+                />
               </SwiperSlide>
             ))
           }
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 ?? '-'}