40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import type { MDXComponents } from "mdx/types";
|
|
import H1 from "../../layout/H1";
|
|
import H2 from "../../layout/H2";
|
|
import H3 from "../../layout/H3";
|
|
import H4 from "../../layout/H4";
|
|
import CodeBlock from "../../elements/CodeBlock";
|
|
|
|
type Params = {
|
|
components: MDXComponents;
|
|
codeBgColor?: string;
|
|
};
|
|
|
|
export default function useMDXComponents({
|
|
components,
|
|
codeBgColor,
|
|
}: Params): MDXComponents {
|
|
return {
|
|
h1: ({ children }) => <H1>{children}</H1>,
|
|
h2: ({ children }) => <H2>{children}</H2>,
|
|
h3: ({ children }) => <H3>{children}</H3>,
|
|
h4: ({ children }) => <H4>{children}</H4>,
|
|
pre: ({ children, ...props }) => {
|
|
if (React.isValidElement(children) && children.props) {
|
|
return (
|
|
<CodeBlock {...props} backgroundColor={codeBgColor}>
|
|
{children.props.children}
|
|
</CodeBlock>
|
|
);
|
|
}
|
|
return (
|
|
<CodeBlock {...props} backgroundColor={codeBgColor}>
|
|
{children}
|
|
</CodeBlock>
|
|
);
|
|
},
|
|
...components,
|
|
};
|
|
}
|