'use client' import { urlForImage } from 'lib/sanity/sanity.image' import { cn } from 'lib/utils' import Image from 'next/image' interface SanityImageProps { image: object | any alt: string priority?: boolean width?: number height?: number quality?: number sizes?: string className?: string } const placeholderImg = '/product-img-placeholder.svg' export default function SanityImage(props: SanityImageProps) { const { image: source, priority = false, quality = 75, alt = '', height = 1080, width = 1080, sizes = '100vw', className, } = props const rootClassName = cn('w-full h-auto', className) const image = source?.asset?._rev ? ( <> <Image className={`${rootClassName}`} placeholder="blur" width={width} height={height} alt={alt} src={urlForImage(source) .width(width) .height(height) .quality(quality) .url()} sizes={sizes} priority={priority} blurDataURL={source.asset.metadata.lqip} /> </> ) : ( <> <Image className={`${rootClassName}`} width={width} height={height} alt={alt} src={placeholderImg} sizes={sizes} priority={false} /> </> ) return image }