33 lines
1.6 KiB
TypeScript
33 lines
1.6 KiB
TypeScript
|
// components/mdx-remote.js
|
||
|
|
import { MDXRemote, MDXRemoteProps } from 'next-mdx-remote/rsc'
|
||
|
|
import Link from 'next/link'
|
||
|
|
import { JSX } from 'react'
|
||
|
|
|
||
|
|
const components = {
|
||
|
|
h1: (props: any) => <h1 id={props.children} className="inline-block text-3xl font-extrabold text-slate-900 tracking-tight dark:text-slate-200">{(props.children)}</h1>,
|
||
|
|
h2: (props: any) =>
|
||
|
|
<h2 id={props.children} className="text-slate-900 text-xl tracking-tight font-bold my-3 dark:text-slate-200">
|
||
|
|
{(props.children)}
|
||
|
|
</h2>,
|
||
|
|
h3: (props: any) =>
|
||
|
|
<h3 id={props.children} className="text-slate-900 text-xl tracking-tight font-semibold mb-3 dark:text-slate-200">
|
||
|
|
{(props.children)}
|
||
|
|
|
||
|
|
</h3>,
|
||
|
|
h4: (props: any) =>
|
||
|
|
<h4 id={(props.children)}> {(props.children)}</h4>,
|
||
|
|
p: (props: any) => <p className='mt-4 text-lg text-slate-700 dark:text-slate-400'>{(props.children)}</p>,
|
||
|
|
a: (props: any) => <Link href={props.href} className='dark:text-white'>{(props.children)}</Link>,
|
||
|
|
mark: (props: any) => <mark className=' font-mono font-medium bg-[#FFEC99] '>{props.children}</mark>,
|
||
|
|
ul: (props: any) => <ul className='my-4 text-lg text-slate-700 dark:text-slate-400'>{(props.children)}</ul>,
|
||
|
|
li: (props: any) => <li className='mt-4 text-lg text-slate-700 dark:text-slate-400 ml-4'>{(props.children)}</li>,
|
||
|
|
}
|
||
|
|
|
||
|
|
export function CustomMDX(props: JSX.IntrinsicAttributes & MDXRemoteProps) {
|
||
|
|
return (
|
||
|
|
<MDXRemote
|
||
|
|
{...props}
|
||
|
|
components={{ ...components, ...(props.components || {}) }}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|