1 files changed, 46 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..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