on this page component

Took 20 minutes

src/app/[[...slug]]/page.tsx

@@ -14,6 +14,7 @@ import { Metadata } from "next";
 import Embed from "@/components/embed";
 import DocsFooter from "@/components/docs-footer";
 import { cn } from "@/lib/utils";
+import OnThisPage from "@/components/on-this-page";
 
 /**
  * The page to render the documentation markdown content.
@@ -75,7 +76,14 @@ const DocsPage = async ({
             </Breadcrumb>
 
             {/* Content */}
-            <CustomMDX source={page.content} />
+            <div className="flex justify-between">
+                <div className="flex flex-col">
+                    <CustomMDX source={page.content} />
+                </div>
+                <div className="hidden xl:flex">
+                    <OnThisPage page={page} />
+                </div>
+            </div>
             <div className="mt-auto">
                 <DocsFooter pages={pages} />
             </div>

src/components/on-this-page.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { ReactElement, useEffect, useState } from "react";
+import { Bars3CenterLeftIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+
+type Header = {
+    id: string;
+    text: string;
+    level: number;
+};
+
+const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
+    const [headers, setHeaders] = useState<Header[]>([]);
+
+    useEffect(() => {
+        // Regular expression to match markdown headers
+        const headerRegex: RegExp = /^(#{1,6})\s+(.*)$/gm;
+        const extractedHeaders: Header[] = [];
+
+        let match;
+        while ((match = headerRegex.exec(page.content)) !== null) {
+            const level: number = match[1].length; // The number of # symbols determines the header level
+            const text: string = match[2].trim();
+            const id: string = text
+                .toLowerCase()
+                .replace(/\s+/g, "-")
+                .replace(/[^\w-]/g, "");
+
+            extractedHeaders.push({ id, text, level });
+        }
+
+        setHeaders(extractedHeaders);
+    }, [page.content]);
+
+    return (
+        <div className="flex flex-col gap-2 text-sm">
+            {/* Title */}
+            <div className="flex gap-2.5 items-center select-none">
+                <Bars3CenterLeftIcon className="w-5 h-5" />
+                <h1>On This Page</h1>
+            </div>
+
+            {/* Headers */}
+            <ul>
+                {headers.map((header: Header) => (
+                    <li
+                        key={header.id}
+                        className="opacity-65 hover:opacity-80 transition-all transform-gpu"
+                        style={{ marginLeft: `${(header.level - 1) * 16}px` }}
+                    >
+                        <Link href={`#${header.id}`}>{header.text}</Link>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+export default OnThisPage;