Create reusable CopyButton component

src/components/Assets/AssetWarrantyCard.tsx

@@ -1,10 +1,7 @@
-import { t } from "i18next";
-import { useEffect, useState } from "react";
-import CopyToClipboard from "react-copy-to-clipboard";
-
 import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
 
 import { AssetData } from "@/components/Assets/AssetTypes";
+import CopyButton from "@/components/Common/CopyButton";
 
 import { formatDate } from "@/Utils/utils";
 
@@ -19,17 +16,6 @@ export default function AssetWarrantyCard(props: { asset: AssetData }) {
     Vendor: asset.vendor_name,
   };
 
-  const [isCopied, setIsCopied] = useState(false);
-
-  useEffect(() => {
-    if (isCopied) {
-      const timeout = setTimeout(() => {
-        setIsCopied(false);
-      }, 2000);
-      return () => clearTimeout(timeout);
-    }
-  }, [isCopied]);
-
   return (
     <div className="warranty-card relative z-10 flex h-full w-screen flex-col overflow-hidden p-6 text-white transition-all hover:scale-[1.01] hover:from-primary-600 hover:to-primary-700 md:w-full md:rounded-xl xl:w-96">
       <div className="mb-3 text-right text-lg font-bold italic">
@@ -44,23 +30,13 @@ export default function AssetWarrantyCard(props: { asset: AssetData }) {
               </div>
               <div className="flex items-center gap-2 font-semibold">
                 {details[key as keyof typeof details] || "--"}
-                {key === "Serial Number" && (
-                  <button className="tooltip tooltip-bottom">
-                    <CopyToClipboard
-                      text={details[key as keyof typeof details] || "--"}
-                      onCopy={() => setIsCopied(true)}
-                    >
-                      {isCopied ? (
-                        <span className="text-sm text-white">
-                          {t("copied_to_clipboard")}
-                        </span>
-                      ) : (
-                        <CareIcon icon="l-copy" className="text-lg" />
-                      )}
-                    </CopyToClipboard>
-                    <span className="tooltip-text">Copy to clipboard</span>
-                  </button>
-                )}
+                {key === "Serial Number" &&
+                  details[key as keyof typeof details] && (
+                    <CopyButton
+                      content={details[key as keyof typeof details] || ""}
+                      tooltipContent="Copy to clipboard"
+                    />
+                  )}
               </div>
             </div>
           ))}

src/components/Common/CopyButton.tsx

@@ -0,0 +1,51 @@
+import { VariantProps } from "class-variance-authority";
+import { useState } from "react";
+import * as React from "react";
+
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import { Button, buttonVariants } from "@/components/ui/button";
+import { TooltipComponent, TooltipProvider } from "@/components/ui/tooltip";
+
+import { copyToClipboard } from "@/Utils/utils";
+
+export interface CopyButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  children?: React.ReactNode;
+  content: string;
+  tooltipContent?: string;
+}
+const CopyButton = ({
+  content,
+  tooltipContent = "Copy to clipboard",
+  children,
+  size,
+}: CopyButtonProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  return (
+    <TooltipProvider>
+      <TooltipComponent content={isCopied ? "Copied!" : tooltipContent}>
+        <Button
+          variant="link"
+          size={size}
+          onClick={() => {
+            copyToClipboard(content);
+            setIsCopied(true);
+            setTimeout(() => setIsCopied(false), 2500);
+          }}
+        >
+          {children || (
+            <CareIcon
+              icon={isCopied ? "l-check" : "l-copy"}
+              className="text-lg"
+            />
+          )}
+        </Button>
+      </TooltipComponent>
+    </TooltipProvider>
+  );
+};
+
+export default CopyButton;

src/components/Licenses/SBOMViewer.tsx

@@ -1,10 +1,10 @@
 import dayjs from "dayjs";
 import React, { useState } from "react";
-import { CopyToClipboard } from "react-copy-to-clipboard";
 
 import Card from "@/CAREUI/display/Card";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
+import CopyButton from "@/components/Common/CopyButton";
 import beBomData from "@/components/Licenses/be-sbom.json";
 import feBomData from "@/components/Licenses/fe-sbom.json";
 import licenseUrls from "@/components/Licenses/licenseUrls.json";
@@ -13,6 +13,7 @@
   if (!licenseId) return null;
   return licenseUrls[licenseId as keyof typeof licenseUrls] || null;
 };
+
 interface CycloneDXExternalRef {
   url?: string;
   type?: string;
@@ -64,15 +65,9 @@
 }
 
 const BOMDisplay: React.FC = () => {
-  const [copyStatus, setCopyStatus] = useState(false);
   const [showExternalRefs, setShowExternalRefs] = useState<number | null>(null);
   const [activeTab, setActiveTab] = useState<string>("bom");
 
-  const handleCopy = () => {
-    setCopyStatus(true);
-    setTimeout(() => setCopyStatus(false), 2000);
-  };
-
   const bomData = (activeTab === "bom" ? feBomData : beBomData) as CycloneDXBOM;
 
   return (
@@ -182,19 +177,19 @@
           ))}
         </div>
         <div className="mt-4">
-          <CopyToClipboard
-            text={JSON.stringify(bomData, null, 2)}
-            onCopy={handleCopy}
+          <CopyButton
+            content={(() => {
+              try {
+                return JSON.stringify(bomData, null, 2);
+              } catch (error) {
+                return '';
+              }
+            })()}
+            tooltipContent="Copy BOM JSON to clipboard"
+            variant="primary"
           >
-            <button className="text-md hover:bg-primary-dark w-full rounded-md bg-primary px-4 py-2 text-white transition-all duration-300 focus:outline-none md:w-auto">
-              Copy BOM JSON
-            </button>
-          </CopyToClipboard>
-          {copyStatus && (
-            <span className="mt-2 block text-sm text-gray-600">
-              Copied to clipboard!
-            </span>
-          )}
+            Copy BOM JSON
+          </CopyButton>
         </div>
       </Card>
     </div>

src/components/Shifting/ShiftDetails.tsx

@@ -2,7 +2,6 @@ import careConfig from "@careConfig";
 import { QRCodeSVG } from "qrcode.react";
 import { Link, navigate } from "raviger";
 import { useState } from "react";
-import { CopyToClipboard } from "react-copy-to-clipboard";
 import { useTranslation } from "react-i18next";
 
 import RecordMeta from "@/CAREUI/display/RecordMeta";
@@ -12,6 +11,7 @@ import PrintPreview from "@/CAREUI/misc/PrintPreview";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 import ButtonV2 from "@/components/Common/ButtonV2";
+import CopyButton from "@/components/Common/CopyButton";
 import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
 import { ConsultationModel } from "@/components/Facility/models";
@@ -30,7 +30,6 @@ import { formatDateTime, formatName, formatPatientAge } from "@/Utils/utils";
 
 export default function ShiftDetails(props: { id: string }) {
   const [isPrintMode, setIsPrintMode] = useState(false);
-  const [isCopied, setIsCopied] = useState(false);
   const { t } = useTranslation();
 
   const shiftStatusOptions = careConfig.wartimeShifting
@@ -42,20 +41,11 @@ export default function ShiftDetails(props: { id: string }) {
   });
   const showCopyToclipBoard = (data: any) => {
     return (
-      <a href="#">
-        <CopyToClipboard
-          text={copyContent(data)}
-          onCopy={() => setIsCopied(true)}
-        >
-          {isCopied ? (
-            <span className="copied-to-cb">{t("copied_to_clipboard")}</span>
-          ) : (
-            <span className="copy-to-cb">
-              <CareIcon icon="l-clipboard" className="text-2xl" />
-            </span>
-          )}
-        </CopyToClipboard>
-      </a>
+      <CopyButton
+        content={copyContent(data)}
+        tooltipContent="Copy Details to Clipboard"
+        size="sm"
+      />
     );
   };
 
@@ -93,10 +83,6 @@ export default function ShiftDetails(props: { id: string }) {
     return formattedText;
   };
 
-  setTimeout(() => {
-    setIsCopied(false);
-  }, 5000);
-
   const showPatientCard = (patientData: PatientModel) => {
     const patientGender = GENDER_TYPES.find(
       (i) => i.id === patientData?.gender,