import {CustomPage} from '@common/admin/custom-pages/custom-page';
import {useEffect, useRef} from 'react';
import {highlightCode} from '@common/text-editor/highlight/highlight-code';
interface CustomPageBodyProps {
page: CustomPage;
}
export function CustomPageBody({page}: CustomPageBodyProps) {
const bodyRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (bodyRef.current) {
highlightCode(bodyRef.current);
}
}, []);
return (
<div className="px-16 md:px-24">
<div className="prose mx-auto my-50 dark:prose-invert">
<h1>{page.title}</h1>
<div
ref={bodyRef}
className="whitespace-pre-wrap break-words"
dangerouslySetInnerHTML={{__html: page.body}}
/>
</div>
</div>
);
}