25 lines
1002 B
TypeScript
25 lines
1002 B
TypeScript
import { useMDXComponent } from 'next-contentlayer/hooks'
|
|
import PostLink from './link'
|
|
import PostImage from './image'
|
|
import Separator from '../separator'
|
|
|
|
const mdxComponents = {
|
|
Link: PostLink,
|
|
Image: PostImage,
|
|
Separator: Separator,
|
|
}
|
|
|
|
interface MdxProps {
|
|
code: string
|
|
}
|
|
|
|
export function Mdx({ code }: MdxProps) {
|
|
const Component = useMDXComponent(code)
|
|
|
|
return (
|
|
<article className="prose text-lg text-slate-500 max-w-none prose-lg prose-p:leading-normal prose-headings:font-playfair-display prose-headings:text-slate-900 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline prose-a:font-medium prose-strong:font-medium prose-strong:text-slate-900 prose-blockquote:pl-4 prose-blockquote:border-l-2 prose-blockquote:border-slate-900 prose-blockquote:not-italic prose-blockquote:font-normal prose-blockquote:text-inherit before:prose-p:content-[''] after:prose-p:content-[''] prose-hr:my-8">
|
|
<Component components={{ ...mdxComponents }} />
|
|
</article>
|
|
)
|
|
}
|