File size: 1,310 Bytes
19e25f3 |
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
import Image, { ImageProps } from 'next/image';
import * as React from 'react';
import { cn } from '@/lib/utils';
type NextImageProps = {
useSkeleton?: boolean;
classNames?: {
image?: string;
blur?: string;
};
alt: string;
} & (
| { width: string | number; height: string | number }
| { layout: 'fill'; width?: string | number; height?: string | number }
) &
ImageProps;
/**
*
* @description Must set width using `w-` className
* @param useSkeleton add background with pulse animation, don't use it if image is transparent
*/
export default function NextImage({
useSkeleton = false,
src,
width,
height,
alt,
className,
classNames,
...rest
}: NextImageProps) {
const [status, setStatus] = React.useState(
useSkeleton ? 'loading' : 'complete'
);
const widthIsSet = className?.includes('w-') ?? false;
return (
<figure
style={!widthIsSet ? { width: `${width}px` } : undefined}
className={className}
>
<Image
className={cn(
classNames?.image,
status === 'loading' && cn('animate-pulse', classNames?.blur)
)}
src={src}
width={width}
height={height}
alt={alt}
onLoadingComplete={() => setStatus('complete')}
{...rest}
/>
</figure>
);
}
|