src-migrate/components/ui/image.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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;