Update Image component with next image

1 files changed, 29 insertions, 16 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