feat: prompt copied animation

Author: eportis-cloudinary

templates/src/App.css.template

@@ -91,10 +91,75 @@ h2 {
   transition: all 0.2s;
   user-select: text;
   cursor: pointer;
+  position: relative;
 }
 
 .prompts-list li:hover {
   background: rgba(255, 255, 255, 0.1);
   border-left-color: rgba(99, 102, 241, 0.8);
   transform: translateX(4px);
 }
+
+@keyframes wipe-in-out {
+  0% {
+    clip-path: polygon(
+      0% 0%,
+      0% 100%, 
+      0% 100%,
+      0% 0%
+    );
+  }
+  15% {
+    clip-path: polygon(
+      0% 0%,
+      0% 100%, 
+      100% 100%,
+      100% 0%
+    );
+  }
+  85% {
+    clip-path: polygon(
+      0% 0%,
+      0% 100%, 
+      100% 100%,
+      100% 0%
+    );
+  }
+  100% {
+    clip-path: polygon(
+      100% 0%,
+      100% 100%, 
+      100% 100%,
+      100% 0%
+    );
+  }
+}
+
+.prompts-list li::after {
+  content: '✓ copied';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: green;
+  border-radius: 0.5rem;
+  visibility: hidden;
+  padding-top: 0.75em;
+  padding-left: 1em;
+  
+  /* without this it sometimes glitched at the end? */
+  clip-path: polygon(
+    0% 0%,
+    0% 100%, 
+    0% 100%,
+    0% 0%
+  );
+
+}
+
+.prompts-list li.clicked::after {
+  visibility: visible;
+  animation-duration: 1.5s;
+  animation-name: wipe-in-out;
+}

templates/src/App.tsx.template

@@ -14,6 +14,7 @@ const hasUploadPreset = Boolean(uploadPreset);
 
 function App() {
   const [uploadedImageId, setUploadedImageId] = useState<string | null>(null);
+  const [clickedIds, setClickedIds] = useState(new Set());
 
   const handleUploadSuccess = (result: CloudinaryUploadResult) => {
     console.log('Upload successful:', result);
@@ -25,9 +26,16 @@ function App() {
     alert(`Upload failed: ${error.message}`);
   };
 
-  const copyPrompt = (e: React.MouseEvent<HTMLLIElement>) => {
+  const copyPrompt = (e: React.MouseEvent<HTMLLIElement>, id: number) => {
     const text = e.currentTarget.textContent ?? '';
-    void navigator.clipboard.writeText(text);
+    void navigator.clipboard.writeText(text).then(() => {
+      setClickedIds((prev) => new Set(prev).add(id));
+      setTimeout(() => setClickedIds( (prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      }), 2000);
+    });
   };
 
   // Display uploaded image if available, otherwise show a sample
@@ -77,16 +85,16 @@ function App() {
           <ul className="prompts-list">
             {hasUploadPreset ? (
               <>
-                <li onClick={copyPrompt} title="Click to copy">Create an image gallery with lazy loading and responsive images</li>
-                <li onClick={copyPrompt} title="Click to copy">Create a video player that plays a Cloudinary video</li>
-                <li onClick={copyPrompt} title="Click to copy">Add image overlays with text or logos</li>
+                <li key={0} onClick={(e) => copyPrompt(e, 0)} title="Click to copy" className={ clickedIds.has(0) ? "clicked" : '' }>Create an image gallery with lazy loading and responsive images</li>
+                <li key={1} onClick={(e) => copyPrompt(e, 1)} title="Click to copy" className={ clickedIds.has(1) ? "clicked" : '' }>Create a video player that plays a Cloudinary video</li>
+                <li key={2} onClick={(e) => copyPrompt(e, 2)} title="Click to copy" className={ clickedIds.has(2) ? "clicked" : '' }>Add image overlays with text or logos</li>
               </>
             ) : (
               <>
-                <li onClick={copyPrompt} title="Click to copy">Let&apos;s try uploading — help me add an upload preset and upload widget</li>
-                <li onClick={copyPrompt} title="Click to copy">Create an image gallery with lazy loading and responsive images</li>
-                <li onClick={copyPrompt} title="Click to copy">Create a video player that plays a Cloudinary video</li>
-                <li onClick={copyPrompt} title="Click to copy">Add image overlays with text or logos</li>
+                <li key={0} onClick={(e) => copyPrompt(e, 0)} title="Click to copy" className={ clickedIds.has(0) ? "clicked" : '' }>Let&apos;s try uploading — help me add an upload preset and upload widget</li>
+                <li key={1} onClick={(e) => copyPrompt(e, 1)} title="Click to copy" className={ clickedIds.has(1) ? "clicked" : '' }>Create an image gallery with lazy loading and responsive images</li>
+                <li key={2} onClick={(e) => copyPrompt(e, 2)} title="Click to copy" className={ clickedIds.has(2) ? "clicked" : '' }>Create a video player that plays a Cloudinary video</li>
+                <li key={3} onClick={(e) => copyPrompt(e, 3)} title="Click to copy" className={ clickedIds.has(3) ? "clicked" : '' }>Add image overlays with text or logos</li>
               </>
             )}
           </ul>