usdate

src/pages/Home.jsx

@@ -12,6 +12,7 @@ import {
   InputLeftElement,
   Text,
   useColorMode,
+  useToast,
   VStack,
 } from "@chakra-ui/react";
 import React, { useState } from "react";
@@ -26,10 +27,13 @@ import bannerImage from "../assets/images/bannerImg.png";
 import bannerImageMobile from "../assets/images/bannerImgmobile.png";
 import { BiSearchAlt } from "react-icons/bi";
 import { MdContentCopy } from "react-icons/md";
+import { RiFileCopyLine } from "react-icons/ri";
+import { RiFileCopyFill } from "react-icons/ri";
 
 
 import { motion, AnimatePresence } from "framer-motion"; // Import AnimatePresence and motion
 import { useGnerateShortUrlMutation } from "../Services/api.service";
+import ToastBox from "../components/ToastBox";
 
 const AnimatedBox = motion(HStack); // Create an animated HStack
 
@@ -43,7 +47,8 @@ const Home = () => {
   const navigate = useNavigate()
   const [ shortURL, setShortURL ] = useState(null)
   const [ isLoading, setIsLoading ] = useState(false)
-
+  const [ isCopy, setIsCopy ] = useState(false)
+const toast = useToast()
   const[ genrateSortURL ] = useGnerateShortUrlMutation()
 
   // const handleGenrateShortURL = async () => {
@@ -55,6 +60,27 @@ const Home = () => {
   //     console.error("Error generating short URL:", error);
   //   }
   // };
+  function copyToClipboard(text) {
+    if (!navigator.clipboard) {
+      console.error("Clipboard API is not available.");
+      return;
+    }
+  
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        toast({
+          render: () => (
+            <ToastBox status={"warn"} message={"Text copied to clipboard"} />
+          ),
+        });
+        setIsCopy(true)
+      })
+      .catch((err) => {
+        console.error("Failed to copy text: ", err);
+      });
+  }
+  
 
   const handleGenrateShortURL = async () => {
     setLinkVisible(true)
@@ -193,7 +219,7 @@ const Home = () => {
             rounded={"md"}
             w={"100%"}
           >
-            <Text as={"span"} fontSize={"sm"} textDecoration={"underline"}>
+            <Text as={"span"} color={colorMode==="light"?"#230A79":"#ccc"} fontSize={"sm"} textDecoration={"underline"}>
               {shortURL}
             </Text>
             <Icon
@@ -203,9 +229,8 @@ const Home = () => {
               p={1.5}
               cursor={"pointer"}
               rounded={"md"}
-              as={MdContentCopy}
-              color={"#230A79"}
-
+              as={isCopy ? RiFileCopyFill :RiFileCopyLine}
+              color={colorMode==="light"?"#230A79":"#ccc"} 
               onClick={()=>copyToClipboard(shortURL)}
             />
           </AnimatedBox>