cleanup markdown renderer

src/app/components/mx-components.tsx

@@ -1,54 +1,20 @@
 import { MDXRemote } from "remote-mdx/rsc";
-import { CodeHighlighter } from "@/app/components/code-highlighter";
-import { Separator } from "@/app/components/ui/separator";
-import { cn } from "@/app/common/utils";
-import Link from "next/link";
 import { ReactElement } from "react";
-
-/**
- * Create a heading component.
- *
- * @param level the level of the heading.
- */
-function createHeading(level: number) {
-  // eslint-disable-next-line react/display-name
-  return (props: any) => {
-    const Tag = `h${level}`;
-    return (
-      <div className={cn("pb-4", level > 1 ? "pt-6" : null)}>
-        <Tag className={`text-${4 - level}xl font-semibold pb-2`} {...props} />
-        <Separator />
-      </div>
-    );
-  };
-}
+import { formatCode, formatHeading, formatLink, formatList } from "@/app/components/mx-renderer";
 
 /**
  * The components to use in the MDX renderer.
  */
 const components = {
-  h1: (props: any) => createHeading(1)(props),
-  h2: (props: any) => createHeading(2)(props),
-  code: (props: any) => {
-    if (!props.className) {
-      return <code className="text-xs bg-secondary p-1 rounded-md leading-none" {...props} />;
-    }
-
-    return (
-      <div className="pt-4">
-        <CodeHighlighter
-          language={props.className ? props.className.replace("language-") : undefined}
-          code={props.children}
-        />
-      </div>
-    );
-  },
-  ul: (props: any) => <ul className="list-disc pl-4 pt-2">{props.children}</ul>,
-  a: (props: any) => (
-    <Link href={props.href} className="text-primary hover:opacity-85 transition-all transform-gpu">
-      {props.children}
-    </Link>
-  ),
+  h1: (props: any) => formatHeading(1, props),
+  h2: (props: any) => formatHeading(2, props),
+  h3: (props: any) => formatHeading(3, props),
+  h4: (props: any) => formatHeading(4, props),
+  h5: (props: any) => formatHeading(5, props),
+  h6: (props: any) => formatHeading(6, props),
+  code: (props: any) => formatCode(props),
+  ul: (props: any) => formatList(props),
+  a: (props: any) => formatLink(props),
 };
 
 export function CustomMDX(props: any): ReactElement {

src/app/components/mx-renderer.tsx

@@ -0,0 +1,64 @@
+import { CodeHighlighter } from "@/app/components/code-highlighter";
+import { Separator } from "@/app/components/ui/separator";
+import Link from "next/link";
+
+/**
+ * Create a heading component.
+ *
+ * @param level The level of the heading.
+ * @param props The props to pass to the heading.
+ */
+export function formatHeading(level: number, props: any) {
+  const Tag = `h${level}`;
+  const paddingBottom = level > 1 ? "pt-6" : "";
+  const textSize = 4 - level;
+
+  return (
+    <div className={`pb-4 ${paddingBottom}`}>
+      <Tag className={`text-${textSize}xl font-semibold pb-2`} {...props} />
+      <Separator />
+    </div>
+  );
+}
+
+/**
+ * Format a code block.
+ *
+ * @param props The props to pass to the code block.
+ */
+export function formatCode(props: any) {
+  if (!props.className) {
+    return <code className="text-xs bg-secondary p-1 rounded-md leading-none" {...props} />;
+  }
+
+  return (
+    <div className="pt-4">
+      <CodeHighlighter
+        language={props.className ? props.className.replace("language-") : undefined}
+        code={props.children}
+      />
+    </div>
+  );
+}
+
+/**
+ * Format a list.
+ *
+ * @param props The props to pass to the list.
+ */
+export function formatList(props: any) {
+  return <ul className="list-disc pl-4 pt-2">{props.children}</ul>;
+}
+
+/**
+ * Format a link.
+ *
+ * @param props The props to pass to the link.
+ */
+export function formatLink(props: any) {
+  return (
+    <Link href={props.href} className="text-primary hover:opacity-85 transition-all transform-gpu">
+      {props.children}
+    </Link>
+  );
+}