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

130 lines
3.3 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-21 10:41:22 -07:00
<Heading size={1} className="text-4xl">
{children}
</Heading>
2024-04-20 22:01:52 -07:00
),
2024-04-20 22:55:55 -07:00
h2: ({ children }: { children: ReactNode }): ReactElement => (
2024-04-21 10:41:22 -07:00
<Heading size={2} className="text-3xl">
{children}
</Heading>
2024-04-20 22:01:52 -07:00
),
2024-04-20 22:55:55 -07:00
h3: ({ children }: { children: ReactNode }): ReactElement => (
2024-04-21 10:41:22 -07:00
<Heading size={3} className="text-2xl">
{children}
</Heading>
2024-04-20 22:01:52 -07:00
),
2024-04-20 22:55:55 -07:00
h4: ({ children }: { children: ReactNode }): ReactElement => (
2024-04-21 10:41:22 -07:00
<Heading size={4} className="text-xl">
{children}
</Heading>
2024-04-20 22:01:52 -07:00
),
2024-04-20 22:55:55 -07:00
h5: ({ children }: { children: ReactNode }): ReactElement => (
2024-04-21 10:41:22 -07:00
<Heading size={5} className="text-lg">
{children}
</Heading>
2024-04-20 22:01:52 -07:00
),
2024-04-20 22:55:55 -07:00
h6: ({ children }: { children: ReactNode }): ReactElement => (
2024-04-21 10:41:22 -07:00
<Heading size={5} className="text-md">
{children}
</Heading>
2024-04-20 22:01:52 -07:00
),
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-21 11:46:49 -07:00
<ul className="px-3 list-disc list-inside">{children}</ul>
2024-04-20 22:01:52 -07:00
),
// 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.
*
2024-04-21 10:41:22 -07:00
* @param className the class name of the heading
* @param size the size of the heading
2024-04-20 22:01:52 -07:00
* @param children the children within the heading
* @return the heading jsx
*/
const Heading = ({
2024-04-21 10:41:22 -07:00
className,
2024-04-20 22:01:52 -07:00
size,
children,
}: {
2024-04-21 10:41:22 -07:00
className: string;
size: number;
2024-04-20 22:01:52 -07:00
children: ReactNode;
}): ReactElement => (
2024-04-21 10:41:22 -07:00
<h1 className={cn("pt-2.5 font-bold", size >= 2 && "pt-7", className)}>
{children}
</h1>
2024-04-20 22:01:52 -07:00
);