feat: Add copy link to clipboard button

* feat: Add copy link to clipboard button(#362)

* change the icon and color

* added cursor-pointer

components/CopyToClipboard/CopyToClipboard.tsx

@@ -0,0 +1,31 @@
+import useCopyToClipboard from 'hooks/useCopyToClipboard'
+import React from 'react'
+import { FaRegCopy } from 'react-icons/fa'
+
+type CopyToClipboardProps = {
+  url: string
+}
+
+export const CopyToClipboard = ({ url }: CopyToClipboardProps): JSX.Element => {
+  const [copyToClipboard, { success }] = useCopyToClipboard()
+
+  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-violet-500 cursor-pointer"
+        onClick={(e) => handleCopy(e)}
+      />
+      <p className="dropdown-content bg-violet-500 text-white text-sm rounded-lg p-1.5 cursor-default">
+        {success ? 'Copied!' : 'Copy'}
+      </p>
+    </div>
+  )
+}
+
+export default CopyToClipboard

components/CopyToClipboard/index.ts

@@ -0,0 +1 @@
+export { CopyToClipboard } from './CopyToClipboard'

components/LinksContainer/LinkContainer.jsx

@@ -1,20 +1,25 @@
-import React from "react";
-import { BsBoxArrowUpRight } from "react-icons/bs";
+import React from 'react'
+import { BsBoxArrowUpRight } from 'react-icons/bs'
+import { CopyToClipboard } from 'components/CopyToClipboard'
 
 export const LinkContainer = (props) => {
-  const { name, description, url, getCardId } = props;
+  const { name, description, url, getCardId } = props
+
   return (
     <li
       onClick={() => getCardId(props)}
       className="z-10 h-64 w-[98%] cursor-pointer rounded-3xl border border-dashed border-violet-500 bg-gray-100 shadow-lg transition-all duration-100 ease-in hover:scale-[1.02] dark:bg-gray-900 dark:text-gray-300 dark:shadow-sm md:w-72"
     >
       <div className="card-body">
-        <h2
-          className="text-violet-500 text-xl cursor-default truncate ..."
-          title={name}
-        >
-          {name}
-        </h2>
+        <div className="flex justify-between items-center">
+          <h2
+            className="text-violet-500 text-xl cursor-default truncate ..."
+            title={name}
+          >
+            {name}
+          </h2>
+          <CopyToClipboard url={url} />
+        </div>
         <p className="w-full font-sans text-clip-30 h-24 w-full overflow-hidden">
           {description}
         </p>
@@ -34,5 +39,5 @@ export const LinkContainer = (props) => {
         </div>
       </div>
     </li>
-  );
-};
+  )
+}

components/popup/index.tsx

@@ -1,18 +1,19 @@
-import React from "react";
-import { DBType } from "types";
-import { BsGlobe } from "react-icons/bs";
-import { Backdrop } from "components/Backdrop/Backdrop";
-import { createPortal } from "react-dom";
-import useDelayUnmount from "hooks/useDelayUnmount"
+import React from 'react'
+import { DBType } from 'types'
+import { BsGlobe } from 'react-icons/bs'
+import { Backdrop } from 'components/Backdrop/Backdrop'
+import { createPortal } from 'react-dom'
+import useDelayUnmount from 'hooks/useDelayUnmount'
+import { CopyToClipboard } from 'components/CopyToClipboard'
 
 const Popup: React.FC<{
-  currentCard: null | DBType;
-  onClose: () => void;
+  currentCard: null | DBType
+  onClose: () => void
 }> = ({ currentCard, onClose }) => {
-  const showElement = useDelayUnmount(currentCard, 300);
+  const showElement = useDelayUnmount(currentCard, 300)
 
   if (!showElement) {
-    return null;
+    return null
   }
 
   return (
@@ -22,23 +23,26 @@ const Popup: React.FC<{
         <div
           onClick={(e) => e.stopPropagation()}
           className={`fixed left-1/2 top-1/2 z-[150] max-w-[500px] -translate-x-1/2 -translate-y-1/2 transition-all ${
-            currentCard ? "animate-scale-appearance" : "animate-scale-hide"
+            currentCard ? 'animate-scale-appearance' : 'animate-scale-hide'
           } flex h-fit w-[90%] flex-col justify-between gap-5 overflow-hidden rounded-2xl border border-dashed border-violet-600 bg-gray-100 px-5 py-10 dark:bg-gray-900`}
         >
           <div className="flex flex-col gap-5">
             <div className="flex justify-between items-center">
-              <h2 className="max-w-[80%] text-2xl text-violet-500 capitalize">
-                {currentCard?.name}
-              </h2>
+              <div className="w-full flex justify-between items-center">
+                <h2 className="max-w-[80%] text-2xl text-violet-500 capitalize">
+                  {currentCard?.name}
+                </h2>
+                <CopyToClipboard url={currentCard?.url ?? ''} />
+              </div>
               <h5 className="max-w-[20%] text-xsm text-violet-500 capitalize flex items-center gap-1">
-                {
-                  currentCard?.language ? (
-                    <>
+                {currentCard?.language ? (
+                  <>
                     <BsGlobe />
                     {currentCard?.language}
-                    </>
-                  ) : ''
-                }
+                  </>
+                ) : (
+                  ''
+                )}
               </h5>
             </div>
             <p className="">{currentCard?.description}</p>
@@ -58,7 +62,7 @@ const Popup: React.FC<{
         document.getElementById('overlay-root')!
       )}
     </>
-  );
-};
+  )
+}
 
-export default Popup;
+export default Popup

hooks/useCopyToClipboard.ts

@@ -0,0 +1,27 @@
+import copy from 'copy-to-clipboard'
+import { useState } from 'react'
+
+interface CopyToClipboardReturnValue {
+  value: string
+  success: boolean
+}
+
+type CopyToClipboardFunction = (text: string, options?: object) => void
+
+export default function useCopyToClipboard(): [
+  CopyToClipboardFunction,
+  CopyToClipboardReturnValue
+] {
+  const [value, setValue] = useState('')
+  const [success, setSuccess] = useState(false)
+
+  const copyToClipboard: CopyToClipboardFunction = (text, options) => {
+    const result = copy(text, options)
+    if (result) setValue(text)
+    setSuccess(result)
+
+    setTimeout(() => setSuccess(false), 1500)
+  }
+
+  return [copyToClipboard, { value, success }]
+}