[Portal] Add Copy Page button to documentation pages

Add a global "Copy Page" button to all documentation pages, allowing users to copy the entire page content with one click instead of manually selecting text from top to bottom.

Author: wamimi

apps/portal/src/components/Layouts/DocLayout.tsx

@@ -6,6 +6,7 @@ import {
   type SidebarLink,
 } from "../others/Sidebar";
 import { TableOfContentsSideBar } from "../others/TableOfContents";
+import { CopyPageButton } from "../others/CopyPageButton";
 
 export type SideBar = {
   name: string;
@@ -58,9 +59,12 @@ export function DocLayout(props: DocLayoutProps) {
         data-noindex={props.noIndex}
       >
         <div className="grow xl:mt-6">
-          <h5 className="mb-2 text-sm text-muted-foreground">
-            {props.sideBar.name}
-          </h5>
+          <div className="flex items-center justify-between mb-2">
+            <h5 className="text-sm text-muted-foreground">
+              {props.sideBar.name}
+            </h5>
+            <CopyPageButton />
+          </div>
           {props.children}
         </div>
         <div className="mt-16 xl:mt-20">

apps/portal/src/components/others/CopyPageButton.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "../ui/button";
+
+export function CopyPageButton() {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      // Get the main content element
+      const mainElement = document.querySelector("main");
+      if (!mainElement) {
+        return;
+      }
+
+      // Get text content, preserving some structure
+      const textContent = mainElement.innerText || mainElement.textContent || "";
+
+      await navigator.clipboard.writeText(textContent);
+      setCopied(true);
+
+      // Reset after 2 seconds
+      setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    } catch (error) {
+      console.error("Failed to copy page content:", error);
+    }
+  };
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={handleCopy}
+      className="gap-2"
+    >
+      {copied ? (
+        <>
+          <CheckIcon className="size-4" />
+          Copied!
+        </>
+      ) : (
+        <>
+          <CopyIcon className="size-4" />
+          Copy Page
+        </>
+      )}
+    </Button>
+  );
+}