51 lines
936 B
TypeScript
51 lines
936 B
TypeScript
import type { CSSProperties, ImgHTMLAttributes } from 'react'
|
|
|
|
type ImageSource = string | { src: string }
|
|
|
|
export type ImageProps = Omit<
|
|
ImgHTMLAttributes<HTMLImageElement>,
|
|
'src' | 'width' | 'height'
|
|
> & {
|
|
src: ImageSource
|
|
width?: number
|
|
height?: number
|
|
fill?: boolean
|
|
priority?: boolean
|
|
placeholder?: string
|
|
}
|
|
|
|
const resolveSource = (src: ImageSource) => {
|
|
return typeof src === 'string' ? src : src.src
|
|
}
|
|
|
|
export default function Image({
|
|
src,
|
|
fill,
|
|
priority,
|
|
style,
|
|
width,
|
|
height,
|
|
...rest
|
|
}: ImageProps) {
|
|
const resolvedStyle: CSSProperties = fill
|
|
? {
|
|
position: 'absolute',
|
|
inset: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
...style,
|
|
}
|
|
: { ...style }
|
|
|
|
return (
|
|
<img
|
|
src={resolveSource(src)}
|
|
width={width}
|
|
height={height}
|
|
loading={priority ? 'eager' : rest.loading}
|
|
{...rest}
|
|
style={resolvedStyle}
|
|
/>
|
|
)
|
|
}
|