Frontend/src/app/components/mdx-components.tsx

import { MDXRemote } from "remote-mdx/rsc";
import { ReactElement } from "react";
import {
  formatCode,
  formatHeading,
  formatLink,
  formatList,
  formatTable,
  formatTableData,
  formatTableHeader,
} from "@/app/components/mdx-renderer";
import remarkGfm from "remark-gfm";

/**
 * The components to use in the MDX renderer.
 */
const components = {
  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),
  table: (props: any) => formatTable(props),
  th: (props: any) => formatTableHeader(props),
  td: (props: any) => formatTableData(props),
};

export function CustomMDX(props: any): ReactElement {
  return (
    <MDXRemote
      {...props}
      components={{ ...components, ...(props.components || {}) }}
      options={{
        mdxOptions: {
          remarkPlugins: [remarkGfm],
        },
      }}
    />
  );
}