Files
payloadcms/test/app/live-preview/_heros/HighImpact/index.tsx
2024-03-19 11:31:50 -04:00

32 lines
991 B
TypeScript

import React, { Fragment } from 'react'
import type { Page } from '../../../../test/live-preview/payload-types.js'
import { Gutter } from '../../_components/Gutter/index.js'
import { Media } from '../../_components/Media/index.js'
import RichText from '../../_components/RichText/index.js'
import classes from './index.module.scss'
export const HighImpactHero: React.FC<Page['hero']> = ({ media, richText }) => {
return (
<Gutter className={classes.hero}>
<div className={classes.content}>
<RichText content={richText} />
</div>
<div className={classes.media}>
{typeof media === 'object' && media !== null && (
<Fragment>
<Media
// fill
imgClassName={classes.image}
priority
resource={media}
/>
{media?.caption && <RichText className={classes.caption} content={media.caption} />}
</Fragment>
)}
</div>
</Gutter>
)
}