30 lines
667 B
TypeScript
30 lines
667 B
TypeScript
import type { Media } from '../types';
|
|
|
|
export function MediaImage({
|
|
media,
|
|
eager = false,
|
|
className = ''
|
|
}: {
|
|
media?: Media;
|
|
eager?: boolean;
|
|
className?: string;
|
|
}) {
|
|
if (!media?.url) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
// Media origins are CMS-managed and intentionally unrestricted, so a native image is used here.
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
className={`block h-auto w-full object-cover ${className}`}
|
|
src={media.url}
|
|
alt={media.alt}
|
|
width={media.width}
|
|
height={media.height}
|
|
loading={eager ? 'eager' : 'lazy'}
|
|
fetchPriority={eager ? 'high' : 'auto'}
|
|
/>
|
|
);
|
|
}
|