fix(guide): add more headings

apps/guide/src/components/H2.tsx

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+
+export default function H2({ children, className, ...props }: PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>) {
+	return (
+		<h2 className={`group ${className}`} {...props}>
+			{children}
+		</h2>
+	);
+}

apps/guide/src/components/H3.tsx

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+
+export default function H3({ children, className, ...props }: PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>) {
+	return (
+		<h3 className={`group ${className}`} {...props}>
+			{children}
+		</h3>
+	);
+}

apps/guide/src/components/H4.tsx

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+
+export default function H4({ children, className, ...props }: PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>) {
+	return (
+		<h4 className={`group ${className}`} {...props}>
+			{children}
+		</h4>
+	);
+}

apps/guide/src/components/Mdx.tsx

@@ -3,6 +3,9 @@
 import { Alert, Section, DiscordMessages, DiscordMessage, DiscordMessageEmbed } from '@discordjs/ui';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 import H1 from './H1';
+import H2 from './H2';
+import H3 from './H3';
+import H4 from './H4';
 import { DocsLink } from '~/components/DocsLink';
 import { ResultingCode } from '~/components/ResultingCode';
 
@@ -20,6 +23,9 @@ export function Mdx({ code }: { code: string }) {
 				DocsLink,
 				ResultingCode,
 				h1: H1,
+				h2: H2,
+				h3: H3,
+				h4: H4,
 			}}
 		/>
 	);