From 01d351da55b27c1861dc447caf3c2f46883f49ef Mon Sep 17 00:00:00 2001
From: Jitendra Nirnejak <jeetnirnejak@gmail.com>
Date: Wed, 15 May 2024 18:50:15 +0530
Subject: [PATCH] Animation Modal: checkbox on copy

---
 components/AnimationDetailsModal.tsx | 23 +++++++++++++++++++----
 utils/copyToClipboard.ts             |  4 +---
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/components/AnimationDetailsModal.tsx b/components/AnimationDetailsModal.tsx
index 8953f32..23cad5f 100644
--- a/components/AnimationDetailsModal.tsx
+++ b/components/AnimationDetailsModal.tsx
@@ -73,6 +73,9 @@ const AnimationDetailsModal: React.FC<Props> = ({
       : animation.animationClass
   }, [animation, modifiers])
 
+  const [isClassCopied, setIsClassCopied] = React.useState(false)
+  const [isConfigCopied, setIsConfigCopied] = React.useState(false)
+
   const handleCardClick = (e) => {
     e.stopPropagation()
   }
@@ -175,9 +178,15 @@ const AnimationDetailsModal: React.FC<Props> = ({
                   </pre>
                   <button
                     className="rounded p-2 absolute top-2 right-2 text-zinc-300 hover:bg-zinc-950 hover:text-zinc-200 focus:bg-zinc-950 focus:outline-none"
-                    onClick={() => copyToClipboard(animation.animationClass)}
+                    onClick={() => {
+                      copyToClipboard(code)
+                      setIsConfigCopied(true)
+                      setTimeout(() => {
+                        setIsConfigCopied(false)
+                      }, 3000)
+                    }}
                   >
-                    <Copy size={16} />
+                    {isConfigCopied ? <Check size={16} /> : <Copy size={16} />}
                   </button>
                 </div>
               </div>
@@ -188,9 +197,15 @@ const AnimationDetailsModal: React.FC<Props> = ({
                 {animationClassName}
                 <button
                   className="rounded p-2 text-zinc-300 hover:bg-zinc-950 hover:text-zinc-200 focus:bg-zinc-950 focus:outline-none"
-                  onClick={() => copyToClipboard(animationClassName)}
+                  onClick={() => {
+                    copyToClipboard(animationClassName)
+                    setIsClassCopied(true)
+                    setTimeout(() => {
+                      setIsClassCopied(false)
+                    }, 3000)
+                  }}
                 >
-                  <Copy size={16} />
+                  {isClassCopied ? <Check size={16} /> : <Copy size={16} />}
                 </button>
               </code>
             </div>
diff --git a/utils/copyToClipboard.ts b/utils/copyToClipboard.ts
index a949371..fc60035 100644
--- a/utils/copyToClipboard.ts
+++ b/utils/copyToClipboard.ts
@@ -3,9 +3,7 @@ import { toast } from "sonner"
 const copyToClipboard = (link): void => {
   navigator.clipboard
     .writeText(link)
-    .then(() => {
-      toast("Copied to clipboard")
-    })
+    .then(() => {})
     .catch((error) => {
       toast.error("Unable to copy")
       console.log(error)