import { ReactElement, ReactNode } from "react"; import { MDXRemote } from "remote-mdx/rsc"; import { cn } from "@/lib/utils"; import remarkGfm from "remark-gfm"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; /** * The MDX components to style. */ const components: any = { h1: ({ children }: { children: ReactNode }) => ( {children} ), h2: ({ children }: { children: ReactNode }) => ( {children} ), h3: ({ children }: { children: ReactNode }) => ( {children} ), h4: ({ children }: { children: ReactNode }) => ( {children} ), h5: ({ children }: { children: ReactNode }) => ( {children} ), h6: ({ children }: { children: ReactNode }) => ( {children} ), a: ({ href, children }: { href: string; children: ReactNode }) => ( {children} ), p: ({ children }: { children: ReactNode }) => (

{children}

), ul: ({ children }: { children: ReactNode }) => ( ), // Tables // table: ({ children }: { children: any }) => ( // // // // {children?.[0].props?.children?.props?.children} // // // {children?.[1].props?.children} //
// ), // th: ({ children }: { children: ReactNode }) => ( // {children} // ), // td: ({ children }: { children: ReactNode }) => ( // {children} // ), }; /** * The custom render for MDX. * * @param props the props for the MDX * @return the custom mdx */ export const CustomMDX = (props: any): ReactElement => ( ); /** * A heading component. * * @param size the size of the heading. * @param children the children within the heading * @return the heading jsx */ const Heading = ({ size, children, }: { size: string; children: ReactNode; }): ReactElement => (

{children}

);