diff options
Diffstat (limited to 'src-migrate/components')
| -rw-r--r-- | src-migrate/components/ui/image.tsx | 43 |
1 files changed, 15 insertions, 28 deletions
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 |
