feat: Add Copy profile url link button

package.json

@@ -31,6 +31,7 @@
     "eslint-config-next": "14.2.3",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "typescript": "^5",
+    "@playwright/test": "^1.49.1"
   }
 }

src/components/CopyLinkButton.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useState } from "react";
+import { useSession } from "next-auth/react"
+
+export default function CopyLinkButton() {
+  const { data: session } = useSession();
+  const [ isCopied, setCopied ] = useState(false);
+
+  const dataCopy = async () => {
+    await navigator.clipboard.writeText(`${window.location.origin}/u/${session?.githubLogin}`);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <button
+      onClick={ dataCopy }
+      aria-label="Copy profile link"
+      className="inline-flex h-10 items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--card)] px-4 text-sm font-medium text-[var(--card-foreground)] transition-colors hover:bg-[var(--control)]"
+    >
+      { isCopied ? "✓ Copied!" : "🔗 Copy link"}
+    </button>
+  );
+}

src/components/DashboardHeader.tsx

@@ -7,6 +7,7 @@ import SignOutButton from "@/components/SignOutButton";
 import ThemeToggle from "@/components/ThemeToggle";
 import UserAvatar from "@/components/UserAvatar";
 import KeyboardShortcuts from "@/components/KeyboardShortcuts";
+import CopyLinkButton from "./CopyLinkButton";
 
 export default function DashboardHeader() {
   const { data: session } = useSession();
@@ -62,6 +63,7 @@ export default function DashboardHeader() {
           )}
           <KeyboardShortcuts />
           <UserAvatar />
+          <CopyLinkButton />
           <ThemeToggle />
           <SignOutButton />
         </div>

tsconfig.json

@@ -14,7 +14,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "plugins": [
       {