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

113 lines
3.0 KiB
TypeScript
Raw Normal View History

2024-04-20 22:01:52 -07:00
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 = {
2024-04-20 22:55:55 -07:00
h1: ({ children }: { children: ReactNode }): ReactElement => (
2024-04-20 22:01:52 -07:00
<Heading size="text-4xl">{children}</Heading>
),
2024-04-20 22:55:55 -07:00
h2: ({ children }: { children: ReactNode }): ReactElement => (
2024-04-20 22:01:52 -07:00
<Heading size="text-3xl">{children}</Heading>
),
2024-04-20 22:55:55 -07:00
h3: ({ children }: { children: ReactNode }): ReactElement => (
2024-04-20 22:01:52 -07:00
<Heading size="text-2xl">{children}</Heading>
),
2024-04-20 22:55:55 -07:00
h4: ({ children }: { children: ReactNode }): ReactElement => (
2024-04-20 22:01:52 -07:00
<Heading size="text-xl">{children}</Heading>
),
2024-04-20 22:55:55 -07:00
h5: ({ children }: { children: ReactNode }): ReactElement => (
2024-04-20 22:01:52 -07:00
<Heading size="text-lg">{children}</Heading>
),
2024-04-20 22:55:55 -07:00
h6: ({ children }: { children: ReactNode }): ReactElement => (
2024-04-20 22:01:52 -07:00
<Heading size="text-md">{children}</Heading>
),
2024-04-20 22:55:55 -07:00
a: ({
href,
children,
}: {
href: string;
children: ReactNode;
}): ReactElement => (
2024-04-20 22:01:52 -07:00
<a
className="text-minecraft-green-4 cursor-pointer hover:opacity-85 transition-all transform-gpu"
href={href}
>
{children}
</a>
),
2024-04-20 22:55:55 -07:00
p: ({ children }: { children: ReactNode }): ReactElement => (
2024-04-20 22:01:52 -07:00
<p className="leading-4 text-zinc-300/80">{children}</p>
),
2024-04-20 22:55:55 -07:00
ul: ({ children }: { children: ReactNode }): ReactElement => (
2024-04-20 22:01:52 -07:00
<ul className="list-disc list-inside">{children}</ul>
),
// Tables
2024-04-20 22:55:55 -07:00
table: ({ children }: { children: any }) => (
<Table>
<TableHeader>
<TableRow>
{children?.[0].props?.children?.props?.children}
</TableRow>
</TableHeader>
<TableBody>{children?.[1].props?.children}</TableBody>
</Table>
),
th: ({ children }: { children: ReactNode }) => (
<TableHead>{children}</TableHead>
),
td: ({ children }: { children: ReactNode }) => (
<TableCell>{children}</TableCell>
),
2024-04-20 22:01:52 -07:00
};
/**
* The custom render for MDX.
*
* @param props the props for the MDX
* @return the custom mdx
*/
export const CustomMDX = (props: any): ReactElement => (
<MDXRemote
{...props}
components={{
...components,
...(props.components || {}),
}}
options={{
mdxOptions: {
remarkPlugins: [remarkGfm],
},
}}
/>
);
/**
* 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 => (
<h1 className={cn("pt-2.5 font-bold", size)}>{children}</h1>
);