<MediaComponent
videoClassName="absolute top-0 left-0 w-full h-full object-cover z-0"
resource={media}
alt={media.alt || 'Hero Media'}
fill
priority
/>
import React, { Fragment } from 'react';
import type { MediaProps } from '@/types/media-props';
import { ImageMedia } from './image-media';
import { VideoMedia } from './video-media';
export const MediaComponent: React.FC<MediaProps> = (props) => {
const { className, htmlElement = 'div', resource } = props;
const isVideo = typeof resource === 'object' && resource?.mimeType?.includes('video');
const Tag = htmlElement || Fragment;
return (
<Tag
{...(htmlElement !== null
? {
className,
}
: {})}
>
{isVideo ? <VideoMedia {...props} /> : <ImageMedia {...props} />}
</Tag>
);
};
```