add failed state

vercel · May 29, 2024 · 38e9b5d · 38e9b5d
1 parent 987bafd
commit 38e9b5d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/...es/next/src/client/components/react-dev-overlay/internal/components/copy-button/index.tsx b/...es/next/src/client/components/react-dev-overlay/internal/components/copy-button/index.tsx
@@ -10,25 +10,27 @@ export function CopyButton({
   successLabel: string
   content: string
 }) {
-  const [copied, setCopied] = useState(false)
-  const title = copied ? successLabel : label
+  // copied: 0 = not copied, 1 = copied, 2 = error
+  const [copied, setCopied] = useState(0)
+  const isDisabled = copied === 2
+  const title = isDisabled ? '' : copied ? successLabel : label
   return (
     <span
       {...props}
       title={title}
       aria-label={title}
+      aria-disabled={isDisabled}
       role="button"
       onClick={() => {
+        if (isDisabled) return
         if (!navigator.clipboard) {
-          window.console.error(
-            'Next.js dev overlay: Clipboard API not available'
-          )
+          setCopied(2)
           return
         }
         navigator.clipboard.writeText(content).then(() => {
           if (copied) return
-          setCopied(true)
-          setTimeout(() => setCopied(false), 2000)
+          setCopied(1)
+          setTimeout(() => setCopied(0), 2000)
         })
       }}
     >

diff --git a/...es/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx b/...es/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx
@@ -133,6 +133,13 @@ export const styles = css`
   [data-nextjs-data-runtime-error-copy-stack] > svg {
     vertical-align: middle;
   }
+  [data-nextjs-data-runtime-error-copy-stack][aria-disabled],
+  [data-nextjs-data-runtime-error-copy-stack][aria-disabled]:hover {
+    cursor: pointer;
+    color: var(--color-ansi-red);
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
   [data-nextjs-data-runtime-error-copy-stack-success] {
     color: var(--color-ansi-green);
   }
@@ -165,7 +172,6 @@ export const styles = css`
     height: var(--size-font-small);
     margin-left: var(--size-gap);
     flex-shrink: 0;
-
     display: none;
   }