fix(docs): fix copy page button and header hook (#2284)

apps/docs/components/ui/copy-page-button.tsx

@@ -1,65 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { Check, Copy } from 'lucide-react'
-
-const cache = new Map<string, string>()
-
-interface CopyPageButtonProps {
-  markdownUrl: string
-}
-
-export function CopyPageButton({ markdownUrl }: CopyPageButtonProps) {
-  const [copied, setCopied] = useState(false)
-  const [isLoading, setLoading] = useState(false)
-
-  const handleCopy = async () => {
-    const cached = cache.get(markdownUrl)
-    if (cached) {
-      await navigator.clipboard.writeText(cached)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-      return
-    }
-
-    setLoading(true)
-    try {
-      await navigator.clipboard.write([
-        new ClipboardItem({
-          'text/plain': fetch(markdownUrl).then(async (res) => {
-            const content = await res.text()
-            cache.set(markdownUrl, content)
-            return content
-          }),
-        }),
-      ])
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    } catch (err) {
-      console.error('Failed to copy:', err)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <button
-      disabled={isLoading}
-      onClick={handleCopy}
-      className='flex cursor-pointer items-center gap-1.5 rounded-lg border border-border/40 bg-background px-2.5 py-2 text-muted-foreground/60 text-sm leading-none transition-all hover:border-border hover:bg-accent/50 hover:text-muted-foreground'
-      aria-label={copied ? 'Copied to clipboard' : 'Copy page content'}
-    >
-      {copied ? (
-        <>
-          <Check className='h-3.5 w-3.5' />
-          <span>Copied</span>
-        </>
-      ) : (
-        <>
-          <Copy className='h-3.5 w-3.5' />
-          <span>Copy page</span>
-        </>
-      )}
-    </button>
-  )
-}

apps/docs/components/ui/heading.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { type ComponentPropsWithoutRef, useState } from 'react'
+import { Check, Link } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
+interface HeadingProps extends ComponentPropsWithoutRef<'h1'> {
+  as?: HeadingTag
+}
+
+export function Heading({ as, className, ...props }: HeadingProps) {
+  const [copied, setCopied] = useState(false)
+  const As = as ?? 'h1'
+
+  if (!props.id) {
+    return <As className={className} {...props} />
+  }
+
+  const handleClick = async (e: React.MouseEvent) => {
+    e.preventDefault()
+
+    const url = `${window.location.origin}${window.location.pathname}#${props.id}`
+
+    try {
+      await navigator.clipboard.writeText(url)
+      setCopied(true)
+
+      // Update URL hash without scrolling
+      window.history.pushState(null, '', `#${props.id}`)
+
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      // Fallback: just navigate to the anchor
+      window.location.hash = props.id as string
+    }
+  }
+
+  return (
+    <As className={cn('group flex scroll-m-28 flex-row items-center gap-2', className)} {...props}>
+      <a data-card='' href={`#${props.id}`} className='peer' onClick={handleClick}>
+        {props.children}
+      </a>
+      {copied ? (
+        <Check
+          aria-hidden
+          className='size-3.5 shrink-0 text-green-500 opacity-100 transition-opacity'
+        />
+      ) : (
+        <Link
+          aria-hidden
+          className='size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 peer-hover:opacity-100'
+        />
+      )}
+    </As>
+  )
+}