chore: fix share button hover text (#1406)

rupali-codes · Jul 31, 2023 · be033fc · be033fc · vercel · Jul 31, 2023
1 parent 4d5475a
commit be033fc
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 29 deletions.
diff --git a/components/CopyToClipboard/CopyToClipboard.tsx b/components/CopyToClipboard/CopyToClipboard.tsx
@@ -1,5 +1,5 @@
 import useCopyToClipboard from 'hooks/useCopyToClipboard'
-import React from 'react'
+import React, { useState } from 'react'
 import { FaRegCopy } from 'react-icons/fa'
 
 type CopyToClipboardProps = {
@@ -8,23 +8,41 @@ type CopyToClipboardProps = {
 
 export const CopyToClipboard = ({ url }: CopyToClipboardProps): JSX.Element => {
   const [copyToClipboard, { success }] = useCopyToClipboard()
+  const [isHovering, setIsHovering] = useState(false)
 
   function handleCopy(e: React.MouseEvent<SVGElement, MouseEvent>) {
     e.stopPropagation()
     copyToClipboard(url)
   }
 
   return (
-    <div className="dropdown dropdown-left dropdown-hover">
-      <FaRegCopy
-        size={'1.3rem'}
-        className="text-theme-primary cursor-pointer"
-        title="Copy link"
-        onClick={(e) => handleCopy(e)}
-      />
-      <p className="dropdown-content bg-theme-secondary text-white text-sm rounded-lg px-3 py-1 cursor-default">
-        {success ? 'Copied!' : 'Copy'}
-      </p>
+    <div
+      className="dropdown dropdown-left dropdown-hover"
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+    >
+      <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>
   )
 }

diff --git a/components/Share/Share.tsx b/components/Share/Share.tsx
@@ -1,43 +1,65 @@
-import React from 'react';
-import { FaShareAlt } from 'react-icons/fa';
+import React, { useState } from 'react'
+import { FaShareAlt } from 'react-icons/fa'
 
 type ShareProps = {
-  url: string;
-  title: string;
-};
+  url: string
+  title: string
+}
 
 export const Share: React.FC<ShareProps> = ({ url, title }) => {
+  const [showShareOptions, setShowShareOptions] = useState(false)
+
   async function handleShare() {
     if (navigator.share) {
       try {
         await navigator.share({
           title: title,
           url: url,
-        });
-        console.log('Share was successful.');
+        })
+        console.log('Share was successful.')
       } catch (error) {
-        console.error('Error sharing:', error);
+        console.error('Error sharing:', error)
       }
     } else {
-        console.log('Web Share API not supported on this browser.');
-        // Fallback behavior when Web Share API is not supported (e.g., open a new tab with the URL)
-        window.open(url, '_blank');    
+      console.log('Web Share API not supported on this browser.')
+      // Fallback behavior when Web Share API is not supported (e.g., open a new tab with the URL)
+      window.open(url, '_blank')
     }
   }
 
   return (
-    <div className="dropdown dropdown-left dropdown-hover">
+    <div
+      style={{
+        position: 'relative',
+        display: 'inline-block',
+      }}
+      onMouseEnter={() => setShowShareOptions(true)}
+      onMouseLeave={() => setShowShareOptions(false)}
+    >
       <FaShareAlt
         size={'1.2rem'}
         className="text-theme-primary cursor-pointer"
         title="Share link"
         onClick={handleShare}
       />
-      <p className="dropdown-content bg-theme-secondary text-white text-sm rounded-lg px-3 py-1 cursor-default">
-        Share
-      </p>
+      {showShareOptions && (
+        <p
+          className="bg-theme-secondary text-white text-sm rounded-lg px-3 py-1"
+          style={{
+            position: 'absolute',
+            top: '100%',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            zIndex: 1,
+            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+            cursor: 'default',
+          }}
+        >
+          Share
+        </p>
+      )}
     </div>
-  );
-};
+  )
+}
 
-export default Share;
+export default Share