Merged in Feature/perf/product-detail (pull request #127)

Feature/perf/product detail

1 files changed, 33 insertions, 0 deletions

diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx
new file mode 100644
index 00000000..c1dde170
--- /dev/null
+++ b/src-migrate/components/ui/image.tsx
@@ -0,0 +1,33 @@
+import NextImage, { ImageProps as NextImageProps } from 'next/image';
+import { useState } from 'react';
+
+import clsxm from '~/libs/clsxm';
+
+type ImageProps = {
+  rounded?: string;
+} & NextImageProps;
+
+const Image = (props: ImageProps) => {
+  const { alt, src, className, rounded, ...rest } = props;
+  const [isLoading, setLoading] = useState(true);
+
+  return (
+    <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}
+    />
+  );
+};
+export default Image;
\ No newline at end of file