From f62b2345f463695ef0f8f79830cd76b6e0332821 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Sat, 13 Jan 2024 10:35:22 +0700
Subject: Refactor src migrate folder

---
 src-migrate/components/ui/image.tsx | 46 +++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src-migrate/components/ui/image.tsx

(limited to 'src-migrate/components/ui/image.tsx')

diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx
new file mode 100644
index 00000000..a91b2a9d
--- /dev/null
+++ b/src-migrate/components/ui/image.tsx
@@ -0,0 +1,46 @@
+import clsx from 'clsx';
+import NextImage, { ImageProps as NextImageProps } from 'next/image';
+import { useState } from 'react';
+
+import clsxm from '~/libs/clsxm';
+
+type ImageProps = {
+  rounded?: string;
+  classNames?: {
+    wrapper: string
+  }
+} & NextImageProps;
+
+const Image = (props: ImageProps) => {
+  const { alt, src, className, classNames, rounded, ...rest } = props;
+  const [isLoading, setLoading] = useState(true);
+
+  return (
+    <div
+      className={clsx(
+        'overflow-hidden',
+        isLoading ? 'animate-pulse' : '',
+        rounded,
+        classNames?.wrapper
+      )}
+    >
+      <NextImage
+        className={clsxm(
+          'duration-700 ease-in-out',
+          isLoading
+            ? 'scale-[1.02] blur-xl grayscale'
+            : 'scale-100 blur-0 grayscale-0',
+          rounded,
+          className
+        )}
+        src={src}
+        alt={alt}
+        loading='lazy'
+        quality={100}
+        onLoadingComplete={() => setLoading(false)}
+        {...rest}
+      />
+    </div>
+  );
+};
+export default Image;
\ No newline at end of file
-- 
cgit v1.2.3


From a70fd5b6d9c7a769ac1aaa22a7d037ba3be27a05 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 16 Jan 2024 16:08:43 +0700
Subject: Update improve product detail performance

---
 src-migrate/components/ui/image.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src-migrate/components/ui/image.tsx')

diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx
index a91b2a9d..c7ed0b0e 100644
--- a/src-migrate/components/ui/image.tsx
+++ b/src-migrate/components/ui/image.tsx
@@ -26,7 +26,7 @@ const Image = (props: ImageProps) => {
     >
       <NextImage
         className={clsxm(
-          'duration-700 ease-in-out',
+          'duration-500 ease-in-out',
           isLoading
             ? 'scale-[1.02] blur-xl grayscale'
             : 'scale-100 blur-0 grayscale-0',
-- 
cgit v1.2.3


From 7072d220bc86b56e76716d114e28af98219e3f69 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 17 Jan 2024 09:54:59 +0700
Subject: Update image for performance

---
 src-migrate/components/ui/image.tsx | 43 +++++++++++++------------------------
 1 file changed, 15 insertions(+), 28 deletions(-)

(limited to 'src-migrate/components/ui/image.tsx')

diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx
index c7ed0b0e..c1dde170 100644
--- a/src-migrate/components/ui/image.tsx
+++ b/src-migrate/components/ui/image.tsx
@@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import NextImage, { ImageProps as NextImageProps } from 'next/image';
 import { useState } from 'react';
 
@@ -6,41 +5,29 @@ import clsxm from '~/libs/clsxm';
 
 type ImageProps = {
   rounded?: string;
-  classNames?: {
-    wrapper: string
-  }
 } & NextImageProps;
 
 const Image = (props: ImageProps) => {
-  const { alt, src, className, classNames, rounded, ...rest } = props;
+  const { alt, src, className, rounded, ...rest } = props;
   const [isLoading, setLoading] = useState(true);
 
   return (
-    <div
-      className={clsx(
-        'overflow-hidden',
-        isLoading ? 'animate-pulse' : '',
+    <NextImage
+      className={clsxm(
+        'duration-500 ease-in-out',
+        isLoading
+          ? 'scale-[1.02] blur-xl grayscale'
+          : 'scale-100 blur-0 grayscale-0',
         rounded,
-        classNames?.wrapper
+        className
       )}
-    >
-      <NextImage
-        className={clsxm(
-          'duration-500 ease-in-out',
-          isLoading
-            ? 'scale-[1.02] blur-xl grayscale'
-            : 'scale-100 blur-0 grayscale-0',
-          rounded,
-          className
-        )}
-        src={src}
-        alt={alt}
-        loading='lazy'
-        quality={100}
-        onLoadingComplete={() => setLoading(false)}
-        {...rest}
-      />
-    </div>
+      src={src}
+      alt={alt}
+      loading='lazy'
+      quality={100}
+      onLoadingComplete={() => setLoading(false)}
+      {...rest}
+    />
   );
 };
 export default Image;
\ No newline at end of file
-- 
cgit v1.2.3