Update Image component with next image

2 files changed, 31 insertions, 17 deletions

diff --git a/src/core/components/elements/Image/Image.jsx b/src/core/components/elements/Image/Image.jsx
index 1562444c..be275e8d 100644
--- a/src/core/components/elements/Image/Image.jsx
+++ b/src/core/components/elements/Image/Image.jsx
@@ -1,5 +1,6 @@
-import { LazyLoadImage } from 'react-lazy-load-image-component'
-import 'react-lazy-load-image-component/src/effects/opacity.css'
+import NextImage from 'next/image'
+import { useState } from 'react'
+import classNames from 'classnames'
 
 /**
  * The `Image` component is used to display lazy-loaded images.
@@ -9,20 +10,32 @@ import 'react-lazy-load-image-component/src/effects/opacity.css'
  * @param {string} props.alt - Alternative text to be displayed if the image is not found.
  * @returns {JSX.Element} - Rendered `Image` component.
  */
-const Image = ({ ...props }) => (
-  <>
-    <LazyLoadImage
-      {...props}
-      src={props.src || '/images/noimage.jpeg'}
-      placeholderSrc='/images/indoteknik-placeholder.png'
-      effect='opacity'
-      alt={props.src ? props.alt : 'Image Not Found - Indoteknik'}
-      wrapperClassName='bg-white'
-      loading='eager'
-    />
-  </>
-)
+const Image = ({ ...props }) => {
+  const [isLoading, setIsLoading] = useState(true)
 
-Image.defaultProps = LazyLoadImage.defaultProps
+  const imageClassNames = classNames(
+    'duration-500 ease-in-out',
+    {
+      'blur-2xl grayscale': isLoading,
+      'blur-0 grayscale-0': !isLoading
+    },
+    props.className
+  )
+
+  return (
+    <>
+      <NextImage
+        {...props}
+        src={props.src || '/images/noimage.jpeg'}
+        alt={props.src ? props.alt : 'Image Not Found - Indoteknik'}
+        key={props.src || '/images/noimage.jpeg'}
+        className={imageClassNames}
+        width={256}
+        height={256}
+        onLoadingComplete={() => setIsLoading(false)}
+      />
+    </>
+  )
+}
 
 export default Image
diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index dedbd6ab..2f8101b0 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -10,7 +10,7 @@ import MobileView from '@/core/components/views/MobileView'
 import DesktopView from '@/core/components/views/DesktopView'
 
 const bannerClassName =
-  'absolute rounded-r top-0 left-0 h-full w-auto md:w-[20%] idt-transition border border-gray_r-6'
+  'absolute rounded-r top-0 left-0 h-full w-auto md:w-[20%] border border-gray_r-6'
 
 const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) => {
   const bannerRef = useRef('')
@@ -52,6 +52,7 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) =>
       {bannerMode && (
         <div ref={bannerRef}>
           <Image
+            ref={bannerRef}
             src={products.banner.image}
             alt={products.banner.name}
             style={{ opacity: 1 }}