diff --git a/src/components/CopyCodeButton/index.tsx b/src/components/CopyCodeButton/index.tsx
index 4cf4141199..222e9850b1 100644
--- a/src/components/CopyCodeButton/index.tsx
+++ b/src/components/CopyCodeButton/index.tsx
@@ -1,3 +1,4 @@
+import React, { useState } from 'react';
import CircleButton from "../CircleButton";
interface CopyCodeButtonProps {
@@ -5,38 +6,101 @@ interface CopyCodeButtonProps {
}
export const CopyCodeButton = ({ textToCopy }: CopyCodeButtonProps) => {
- const copyTextToClipboard = () => {
- navigator.clipboard.writeText(textToCopy).catch((err) => {
- console.error("Failed to copy text: ", err);
- });
+ const [isCopied, setIsCopied] = useState(false);
+
+ const copyTextToClipboard = async () => {
+ console.log('Copy button clicked');
+ console.log('Text to copy:', textToCopy);
+
+ if (!navigator.clipboard) {
+ console.log('Clipboard API not available, using fallback');
+ // Fallback for older browsers
+ const textArea = document.createElement("textarea");
+ textArea.value = textToCopy;
+ textArea.style.position = "fixed";
+ document.body.appendChild(textArea);
+ textArea.focus();
+ textArea.select();
+
+ try {
+ const result = document.execCommand('copy');
+ console.log('Fallback copy result:', result);
+ setIsCopied(true);
+ setTimeout(() => {
+ setIsCopied(false);
+ console.log('Copy state reset');
+ }, 2000);
+ } catch (err) {
+ console.error('Fallback copy failed:', err);
+ }
+
+ document.body.removeChild(textArea);
+ return;
+ }
+
+ try {
+ console.log('Using Clipboard API');
+ await navigator.clipboard.writeText(textToCopy);
+ console.log('Text copied successfully');
+ setIsCopied(true);
+ setTimeout(() => {
+ setIsCopied(false);
+ console.log('Copy state reset');
+ }, 2000);
+ } catch (err) {
+ console.error('Clipboard API copy failed:', err);
+ }
};
+ console.log('Component rendered, isCopied:', isCopied);
+
return (
{
+ console.log('CircleButton clicked');
+ copyTextToClipboard();
+ }}
ariaLabel="Copy code to clipboard"
- className="bg-white text-black"
+ className={`bg-white ${isCopied ? 'text-green-600' : 'text-black'} transition-colors duration-200`}
>
-
+ {isCopied ? (
+
+ ) : (
+
+ )}
);
-};
+};
\ No newline at end of file
diff --git a/src/components/MethodSignature/index.astro b/src/components/MethodSignature/index.astro
index 0c8589e1ff..3af1584f81 100644
--- a/src/components/MethodSignature/index.astro
+++ b/src/components/MethodSignature/index.astro
@@ -11,31 +11,27 @@ import {
} from "@/types/parsers.interface.ts";
import CodeContainer from "@components/CodeContainer/index.astro";
import { CopyCodeButton } from "../CopyCodeButton";
+
const { params, name, overloads } = Astro.props;
const formatParam = (param: ReferenceParam) =>
param.optional ? `[${param.name}]` : `${param.name}`;
-let formattedParams = [];
-
-if (params) {
- formattedParams.push(params.map(formatParam).join(", "));
-} else if (overloads) {
- for (const overload of overloads) {
- formattedParams.push(overload.params.map(formatParam).join(", "));
- }
-}
-
-const signature = `${name}(${formattedParams})`;
+const signatures = params
+ ? [`${name}(${params.map(formatParam).join(", ")})`]
+ : overloads
+ ? overloads.map(overload =>
+ `${name}(${overload.params.map(formatParam).join(", ")})`)
+ : [];
---
{
- formattedParams.map((params) => (
+ signatures.map((signature) => (
- {`${name}(${params})`}
+ {signature}
))
-}
+}
\ No newline at end of file