29 lines
854 B
JavaScript
29 lines
854 B
JavaScript
import React from 'react'
|
|
import Head from 'next/head'
|
|
import { useMDXComponent } from 'next-contentlayer/hooks';
|
|
import { Paragraph } from './Paragraph'
|
|
import { Anchor } from './Anchor'
|
|
import { Heading } from './Heading'
|
|
|
|
|
|
const MdxContent = ({ body, observer }) => {
|
|
const customComponents = {
|
|
Head,
|
|
p: Paragraph,
|
|
a: Anchor,
|
|
h1: Heading({ level: 1, observer }),
|
|
h2: Heading({ level: 2, observer }),
|
|
h3: Heading({ level: 3, observer }),
|
|
h4: Heading({ level: 4, observer }),
|
|
h5: Heading({ level: 5, observer }),
|
|
h6: Heading({ level: 6, observer }),
|
|
}
|
|
const Component = useMDXComponent(body.code);
|
|
|
|
return <Component components={ customComponents }/>
|
|
};
|
|
|
|
// prevent rerendering of the component if it's props don't change
|
|
// i.e. re-render only when the observer is set
|
|
export default React.memo(MdxContent);
|