diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 47514f7..bf29349 100644 --- a/src/pages/Home.jsx +++ b/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: () => ( + + ), + }); + 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%"} > - + {shortURL} { p={1.5} cursor={"pointer"} rounded={"md"} - as={MdContentCopy} - color={"#230A79"} - + as={isCopy ? RiFileCopyFill :RiFileCopyLine} + color={colorMode==="light"?"#230A79":"#ccc"} onClick={()=>copyToClipboard(shortURL)} />