Creating CopyTextField component and adding it to showCompletedUpload and Shaere Modal

frontend/src/components/upload/modals/showCompletedUploadModal.tsx

@@ -1,13 +1,10 @@
-import { ActionIcon, Button, Stack, Text, TextInput } from "@mantine/core";
-import { useClipboard } from "@mantine/hooks";
+import { Button, Stack, Text } from "@mantine/core";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import moment from "moment";
 import { useRouter } from "next/router";
-import { TbCopy, TbChecks } from "react-icons/tb";
-import { useState, useRef } from "react";
 import { Share } from "../../../types/share.type";
-import toast from "../../../utils/toast.util";
+import CopyTextField from "../CopyTextField";
 
 const showCompletedUploadModal = (
   modals: ModalsContextProps,
@@ -24,42 +21,15 @@ const showCompletedUploadModal = (
 };
 
 const Body = ({ share, appUrl }: { share: Share; appUrl: string }) => {
-  const clipboard = useClipboard({ timeout: 500 });
+
   const modals = useModals();
   const router = useRouter();
 
-  const [checkState, setCheckState] = useState(false);
-  const timerRef = useRef<number | ReturnType<typeof setTimeout> | undefined>(
-    undefined
-  );
-
   const link = `${appUrl}/share/${share.id}`;
 
-  const copyLink = () => {
-    clipboard.copy(link);
-    toast.success("Your link was copied to the keyboard.");
-    if (timerRef.current) clearTimeout(timerRef.current);
-    timerRef.current = setTimeout(() => {
-      setCheckState(false);
-    }, 1500);
-    setCheckState(true);
-  };
-
   return (
     <Stack align="stretch">
-      <TextInput
-        readOnly
-        variant="filled"
-        value={link}
-        onClick={copyLink}
-        rightSection={
-          window.isSecureContext && (
-            <ActionIcon onClick={copyLink}>
-              {checkState ? <TbCheck /> : <TbCopy />}
-            </ActionIcon>
-          )
-        }
-      />
+      <CopyTextField link={link} />
       <Text
         size="xs"
         sx={(theme) => ({