refactor: CopyToClipboard.tsx with best practices with enhancements

components/CopyToClipboard/CopyToClipboard.tsx

@@ -1,50 +1,36 @@
-import useCopyToClipboard from 'hooks/useCopyToClipboard'
-import React, { useState } from 'react'
-import { FaRegCopy } from 'react-icons/fa'
+import useCopyToClipboard from 'hooks/useCopyToClipboard';
+import React, { useState } from 'react';
+import { FaRegCopy, FaCheckSquare } from 'react-icons/fa';
 
 type CopyToClipboardProps = {
-  url: string
-}
+  url: string;
+};
 
 export const CopyToClipboard = ({ url }: CopyToClipboardProps): JSX.Element => {
-  const [copyToClipboard, { success }] = useCopyToClipboard()
-  const [isHovering, setIsHovering] = useState(false)
+  const [copyToClipboard, { success }] = useCopyToClipboard();
+  const [isCopied, setIsCopied] = useState(false);
 
-  function handleCopy(e: React.MouseEvent<SVGElement, MouseEvent>) {
-    e.stopPropagation()
-    copyToClipboard(url)
+  function handleCopy() {
+    copyToClipboard(url);
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 2000); // Reset the icon after 2 seconds
   }
 
   return (
-    <div
-      className="dropdown dropdown-left dropdown-hover"
-      onMouseEnter={() => setIsHovering(true)}
-      onMouseLeave={() => setIsHovering(false)}
+    <button
+      className="text-theme-primary cursor-pointer bg-transparent border-none p-0"
+      onClick={handleCopy}
+      title="Copy link"
+      aria-label={success && isCopied ? 'Link copied' : 'Copy link'}
+      aria-live="polite"
     >
-      <div style={{ position: 'relative' }}>
-        <FaRegCopy
-          size={'1.3rem'}
-          className="text-theme-primary cursor-pointer"
-          title="Copy link"
-          onClick={(e) => handleCopy(e)}
-        />
-        {isHovering && (
-          <p
-            className="bg-theme-secondary text-white text-sm rounded-lg px-3 py-1 cursor-default"
-            style={{
-              position: 'absolute',
-              top: '-2rem', // Adjust this value to position the text above the icon
-              left: '50%',
-              transform: 'translateX(-50%)',
-              zIndex: 1,
-            }}
-          >
-            {success ? 'Copied!' : 'Copy'}
-          </p>
-        )}
-      </div>
-    </div>
-  )
-}
+      {success && isCopied ? (
+        <FaCheckSquare size={'1.3rem'} />
+      ) : (
+        <FaRegCopy size={'1.3rem'} />
+      )}
+    </button>
+  );
+};
 
-export default CopyToClipboard
+export default CopyToClipboard;