feat: copy to clipboard

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "copy-to-clipboard": "^3.3.3",
     "daisyui": "^2.51.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

src/components/Payment.jsx

@@ -1,5 +1,16 @@
+import copy from "copy-to-clipboard";
+
 const Payment = ({ img, label, id, value }) => {
-  const copyEvent = () => {};
+  const copyEvent = (e) => {
+    const tooltip = e.currentTarget;
+    tooltip.setAttribute("data-tip", "Copied!");
+
+    setTimeout(() => {
+      tooltip.setAttribute("data-tip", "Copy");
+    }, 3000);
+
+    copy(value);
+  };
 
   return (
     <div className="flex justify-between items-center p-4 h-14 sm:mx-0 mx-1 bg-neutral shadow-md rounded-full transition ease-in-out delay-150 sm:hover:scale-105 duration-300">
@@ -8,12 +19,15 @@ const Payment = ({ img, label, id, value }) => {
         {label}
       </p>
       <div>
-        <button
-          className="btn btn-sm bg-neutral border-0 text-neutral-content hover:bg-neutral-focus"
-          onClick={copyEvent}
+        <div
+          className="tooltip tooltip-accent"
+          data-tip="Copy"
+          onClick={(e) => copyEvent(e)}
         >
-          <i className="bx bx-copy text-lg"></i>
-        </button>
+          <button className="btn btn-sm bg-neutral border-0 text-neutral-content hover:bg-neutral-focus">
+            <i className="bx bx-copy text-lg"></i>
+          </button>
+        </div>
         <button className="btn btn-sm bg-neutral border-0 text-neutral-content hover:bg-neutral-focus">
           <i className="bx bx-qr text-lg"></i>
         </button>