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

import { MDXRemote } from "remote-mdx/rsc";
import { ReactElement } from "react";
import { formatCode, formatHeading, formatLink, formatList } from "@/app/components/mdx-renderer";

/**
 * 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),
};

export function CustomMDX(props: any): ReactElement {
  return <MDXRemote {...props} components={{ ...components, ...(props.components || {}) }} />;
}