refactor(ui): standardize copy code feedback across all tabs (#5584)

apps/docs/components/copy-button.tsx

@@ -2,6 +2,7 @@ import type {ButtonProps} from "@heroui/react";
 
 import {useClipboard} from "@heroui/use-clipboard";
 import {memo} from "react";
+import {Tooltip} from "@heroui/react";
 
 import {PreviewButton} from "./preview-button";
 
@@ -32,7 +33,17 @@ export const CopyButton = memo<CopyButtonProps>(({value, className, ...buttonPro
     copy(value);
   };
 
-  return <PreviewButton className={className} icon={icon} onPress={handleCopy} {...buttonProps} />;
+  return (
+    <Tooltip
+      key={copied ? "copied" : "copy"}
+      className="text-xs px-2"
+      closeDelay={0}
+      content={copied ? "Copied!" : "Copy"}
+      radius="md"
+    >
+      <PreviewButton className={className} icon={icon} onPress={handleCopy} {...buttonProps} />
+    </Tooltip>
+  );
 });
 
 CopyButton.displayName = "CopyButton";

apps/docs/components/sandpack/copy-button.tsx

@@ -3,7 +3,7 @@ import {useSandpack} from "@codesandbox/sandpack-react";
 import {Tooltip, Button} from "@heroui/react";
 import {useClipboard} from "@heroui/use-clipboard";
 
-import {CopyLinearIcon} from "@/components/icons";
+import {CheckLinearIcon, CopyLinearIcon} from "@/components/icons";
 
 export const CopyButton = ({code: codeProp}: {code?: string}) => {
   const {copy, copied} = useClipboard();
@@ -16,15 +16,33 @@ export const CopyButton = ({code: codeProp}: {code?: string}) => {
     copy(code);
   };
 
+  const icon = copied ? (
+    <CheckLinearIcon
+      className="text-white dark:text-zinc-500 opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
+      data-visible={copied}
+      height={16}
+      size={16}
+      width={16}
+    />
+  ) : (
+    <CopyLinearIcon
+      className="text-white dark:text-zinc-500 opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
+      data-visible={!copied}
+      height={16}
+      width={16}
+    />
+  );
+
   return (
     <Tooltip
+      key={copied ? "copied" : "copy"}
       className="text-xs px-2"
       closeDelay={0}
       content={copied ? "Copied!" : "Copy"}
       radius="md"
     >
       <Button isIconOnly size="sm" title="Copy Code" variant="light" onPress={copyHandler}>
-        <CopyLinearIcon className="text-white dark:text-zinc-500" height={16} width={16} />
+        {icon}
       </Button>
     </Tooltip>
   );