diff --git a/src/assets/copy.png b/src/assets/copy.png new file mode 100644 index 00000000..d0ea90f7 Binary files /dev/null and b/src/assets/copy.png differ diff --git a/src/assets/copySuccess.png b/src/assets/copySuccess.png new file mode 100644 index 00000000..4d4b9dad Binary files /dev/null and b/src/assets/copySuccess.png differ diff --git a/src/components/form.jsx b/src/components/form.jsx index 38ccb3f4..5711eef7 100644 --- a/src/components/form.jsx +++ b/src/components/form.jsx @@ -1,5 +1,6 @@ import { useEffect, useRef, useState } from "react"; import { LoadingSpinner } from "./loadingSpinner"; +import copyImage from "../assets/copy.png"; const searchParams = new URLSearchParams(window.location.search); const prefillVar = searchParams.get("prefill_var"); @@ -12,6 +13,8 @@ const Form = () => { const [isLoading, setIsLoading] = useState(false); const previousUserInput = useRef(undefined); const hasUserInputChanged = previousUserInput.current !== userInput; + const [copyStatus, setImageSrc] = useState(copyImage); + const [isCopied, setIsCopied] = useState(false); function clearDataBeforeFetch() { setErrorMessage(""); @@ -68,6 +71,9 @@ const Form = () => { .writeText(link) .then(() => { console.log("Link copied to clipboard"); + setImageSrc(copyImage); + setIsCopied(true); + setTimeout(() => setIsCopied(false), 2000); }) .catch((err) => { console.error("Could not copy text: ", err); @@ -148,10 +154,22 @@ const Form = () => {
{data.definition} +
- copyToClipboard(e)} - className="text-blue-600 hover:text-blue-800 visited:text-purple-600">{data.alternatives}