61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { useDispatch } from 'react-redux';
|
|
|
|
import { METADATA } from '../constants';
|
|
import { PageType, setPageType } from '../state/navigation';
|
|
import { ISplitPage } from '../types/cms';
|
|
|
|
import { Contained } from '../components/Contained';
|
|
import { RichBody } from '../components/RichBody';
|
|
import CustomHead from './CustomHead';
|
|
|
|
interface Props {
|
|
page: ISplitPage;
|
|
}
|
|
|
|
export default function RichPage(props: Props) {
|
|
const { page } = props;
|
|
const dispatch = useDispatch();
|
|
|
|
useEffect(() => {
|
|
dispatch(setPageType(PageType.NORMAL));
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<CustomHead
|
|
title={page?.label}
|
|
metadata={{
|
|
DESCRIPTION: page?.label,
|
|
OG_IMAGE: {
|
|
URL: page?.hero?.imageUrl ?? METADATA.OG_IMAGE.URL,
|
|
WIDTH: Number(page?.hero?.width) ?? METADATA.OG_IMAGE.WIDTH,
|
|
HEIGHT: Number(page?.hero?.height) ?? METADATA.OG_IMAGE.HEIGHT,
|
|
ALT: page?.hero?.title ?? METADATA.OG_IMAGE.ALT,
|
|
},
|
|
}}
|
|
/>
|
|
<div className="bg-alt">
|
|
<div className="relative flex items-center justify-center w-full h-full pt-3 bg-gradient-to-bl from-hyper to-blush">
|
|
<img
|
|
style={{ maxHeight: '33vh' }}
|
|
src={page?.hero?.imageUrl}
|
|
className="object-contain w-full"
|
|
alt={page?.hero?.description ?? page?.label}
|
|
/>
|
|
</div>
|
|
|
|
<Contained>
|
|
<h1 className="mt-12 mb-4 text-4xl font-bold leading-none text-primary font-prompt">
|
|
{page?.title}
|
|
</h1>
|
|
|
|
<div className="mb-10">
|
|
<RichBody body={page?.body} />
|
|
</div>
|
|
</Contained>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|