Updates

components/lib/next-js/hooks/useMDXComponents.tsx

@@ -0,0 +1,39 @@
+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,
+    };
+}