Create reusable CopyButton component

public/locale/en.json

@@ -551,6 +551,7 @@
   "copied_to_clipboard": "Copied to clipboard",
   "copilot_thinking": "Copilot is thinking...",
   "copy_phone_number": "Copy Phone Number",
+  "copy_to_clipboard": "Copy to clipboard",
   "could_not_autofill": "We could not autofill any fields from what you said",
   "countries_travelled": "Countries travelled",
   "covid_19_cat_gov": "Covid_19 Clinical Category as per Govt. of Kerala guideline (A/B/C)",

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-full flex-col overflow-hidden p-6 text-white transition-all hover:scale-[1.01] hover:from-primary-600 hover:to-primary-700 rounded-xl xl:w-96">
       <div className="mb-3 text-right text-lg font-bold italic">
@@ -44,23 +30,12 @@ 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]}
+                    />
+                  )}
               </div>
             </div>
           ))}

src/components/Common/CopyButton.tsx

@@ -0,0 +1,62 @@
+import { VariantProps } from "class-variance-authority";
+import { useState } from "react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+
+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 | undefined;
+  tooltipContent?: string;
+}
+
+const CopyButton = ({
+  content,
+  tooltipContent,
+  children,
+  size,
+}: CopyButtonProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const { t } = useTranslation();
+
+  if (!content) return null;
+
+  return (
+    <TooltipProvider>
+      <TooltipComponent
+        content={
+          isCopied
+            ? t("copied_to_clipboard")
+            : (tooltipContent ?? t("copy_to_clipboard"))
+        }
+      >
+        <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/Facility/DoctorVideoSlideover.tsx

@@ -5,6 +5,7 @@ import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
 import SlideOver from "@/CAREUI/interactive/SlideOver";
 import Switch from "@/CAREUI/interactive/Switch";
 
+import CopyButton from "@/components/Common/CopyButton";
 import Loading from "@/components/Common/Loading";
 import { SkillObjectModel } from "@/components/Users/models";
 import { UserAssignedModel } from "@/components/Users/models";
@@ -18,7 +19,6 @@ import routes from "@/Utils/request/api";
 import useTanStackQueryInstead from "@/Utils/request/useQuery";
 import {
   classNames,
-  copyToClipboard,
   formatName,
   isUserOnline,
   relativeTime,
@@ -185,7 +185,11 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
     e.stopPropagation();
     if (!user.alt_phone_number) return;
     const phoneNumber = user.alt_phone_number?.replace(/\D+/g, "");
-    const message = `${courtesyTitle(user)} ${formatName(user)}, I have a query regarding a patient.\n\nPatient Link: ${window.location.href}`;
+    const message = `${courtesyTitle(user)} ${formatName(
+      user,
+    )}, I have a query regarding a patient.\n\nPatient Link: ${
+      window.location.href
+    }`;
     const encodedMessage = encodeURIComponent(message);
     const whatsappAppURL = `whatsapp://send?phone=${phoneNumber}&text=${encodedMessage}`;
     const whatsappWebURL = `https://wa.me/${phoneNumber}?text=${encodedMessage}`;
@@ -241,7 +245,6 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
   }
 
   const { t } = useTranslation();
-  const [copied, setCopied] = useState(false);
 
   return (
     <div
@@ -252,78 +255,59 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
           : "pointer-events-none cursor-not-allowed bg-secondary-400",
       )}
     >
-      <a className="flex" onClick={connectOnWhatsApp}>
-        <div className="flex flex-none items-center justify-center sm:h-6 sm:w-6 md:h-10 md:w-10">
-          {
-            // Show online icon based on last_login
-            user.last_login && isUserOnline(user) ? (
-              <>
-                <CareIcon icon={icon} className="text-xl text-green-600" />
-                <span
-                  className="relative top-2 h-3 w-3 rounded-full bg-primary-500"
-                  aria-label="Online"
-                />
-              </>
-            ) : (
-              <CareIcon icon={icon} className="text-2xl text-secondary-600" />
-            )
-          }
+      <div className="flex flex-none items-center justify-center sm:h-6 sm:w-6 md:h-10 md:w-10">
+        {
+          // Show online icon based on last_login
+          user.last_login && isUserOnline(user) ? (
+            <>
+              <CareIcon icon={icon} className="text-xl text-green-600" />
+              <span
+                className="relative top-2 h-3 w-3 rounded-full bg-primary-500"
+                aria-label="Online"
+              />
+            </>
+          ) : (
+            <CareIcon icon={icon} className="text-2xl text-secondary-600" />
+          )
+        }
+      </div>
+      <div className="ml-4 flex flex-auto flex-col gap-1">
+        <div className="flex justify-between gap-2 text-sm text-secondary-700">
+          <span>
+            <strong>{formatName(user)}</strong>
+          </span>
+          <DoctorConnectButtons
+            user={user}
+            connectOnWhatsApp={connectOnWhatsApp}
+          />
         </div>
-        <div className="ml-4 flex flex-auto flex-col gap-1">
-          <div className="flex justify-between gap-2 text-sm text-secondary-700">
-            <span>
-              <strong>{formatName(user)}</strong>
-            </span>
-            <DoctorConnectButtons
-              user={user}
-              connectOnWhatsApp={connectOnWhatsApp}
-            />
-          </div>
-          {!!user.skills.length && (
-            <div className="mt-1 text-sm leading-5 text-secondary-900">
-              <div className="flex flex-wrap gap-2">
-                {user.skills?.map((skill: SkillObjectModel) => (
-                  <span
-                    key={skill.id}
-                    className="flex items-center gap-2 rounded-full border-secondary-300 bg-secondary-200 px-3 text-xs text-secondary-900"
-                  >
-                    <p className="py-1.5">{skill.name}</p>
-                  </span>
-                ))}
-              </div>
-            </div>
-          )}
-          <div className="flex justify-between gap-2 text-sm text-secondary-500">
-            <div className="flex items-center gap-1">
-              <a
-                role="button"
-                href="#"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  copyToClipboard(user?.alt_phone_number || "");
-                  setCopied(true);
-                  setTimeout(() => setCopied(false), 2500);
-                }}
-              >
-                <span className="tooltip" id="copy-phoneicon">
-                  <span className="tooltip-text tooltip-top">
-                    {t("copy_phone_number")}
-                  </span>
-                  <CareIcon
-                    icon={copied ? "l-check" : "l-clipboard"}
-                    id="copy-icon"
-                    className="h-5 w-5"
-                  />
+        {!!user.skills.length && (
+          <div className="mt-1 text-sm leading-5 text-secondary-900">
+            <div className="flex flex-wrap gap-2">
+              {user.skills?.map((skill: SkillObjectModel) => (
+                <span
+                  key={skill.id}
+                  className="flex items-center gap-2 rounded-full border-secondary-300 bg-secondary-200 px-3 text-xs text-secondary-900"
+                >
+                  <p className="py-1.5">{skill.name}</p>
                 </span>
-              </a>
-              <span>{user.alt_phone_number}</span>
-            </div>
-            <div className="text-sm text-secondary-500">
-              {user.last_login && <span>{relativeTime(user.last_login)}</span>}
+              ))}
             </div>
           </div>
+        )}
+        <div className="flex justify-between gap-2 text-sm text-secondary-500">
+          <div className="flex items-center gap-1">
+            <CopyButton
+              content={user.alt_phone_number}
+              tooltipContent={t("copy_phone_number")}
+            />
+            <span>{user.alt_phone_number}</span>
+          </div>
+          <div className="text-sm text-secondary-500">
+            {user.last_login && <span>{relativeTime(user.last_login)}</span>}
+          </div>
         </div>
-      </a>
+      </div>
     </div>
   );
 }

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 @@ const getLicenseUrl = (licenseId: string | undefined): string | null => {
   if (!licenseId) return null;
   return licenseUrls[licenseId as keyof typeof licenseUrls] || null;
 };
+
 interface CycloneDXExternalRef {
   url?: string;
   type?: string;
@@ -64,15 +65,9 @@ interface CycloneDXBOM {
 }
 
 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,13 @@ const BOMDisplay: React.FC = () => {
           ))}
         </div>
         <div className="mt-4">
-          <CopyToClipboard
-            text={JSON.stringify(bomData, null, 2)}
-            onCopy={handleCopy}
+          <CopyButton
+            content={JSON.stringify(bomData, null, 2)}
+            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>