style: copy button turn yellow on click

src/components/footer/footer.tsx

@@ -1,9 +1,9 @@
-import { motion } from "motion/react";
+import { AnimatePresence, motion } from "motion/react";
 import SocialMediaItem from "@/components/footer/SocialMediaItem";
 import { Discord, Github, LinkedIn, Twitter } from "@/components/footer/socialMediaSvgs";
 import FooterLogotype from "@/components/logos/footerLogotype";
 import Link from "next/link";
-import { JSX } from "react";
+import { JSX, useEffect, useState } from "react";
 
 const socialMediaSvgs: JSX.Element[] = [
   <Discord key={"discord"} />,
@@ -37,7 +37,7 @@ const FooterSectionList = ({ extraStyling, items, title }: FooterSectionListProp
       <ul className={"flex flex-col items-start gap-4"}>
         {items.map((item, index) => (
           <li key={index} className={"list-none"}>
-            <Link href={item.url} target={"_blank"}>
+            <Link href={item.url} target={"_blank"} className="hover:underline">
               {item.title}
             </Link>
           </li>
@@ -64,6 +64,7 @@ export default function Footer() {
       // Use legacy approach for browsers that don't support clipboard API
       legacyCopy(email);
     }
+    setIsCopied(true);
   };
 
   // Legacy approach using temporary input element
@@ -80,6 +81,16 @@ export default function Footer() {
     document.body.removeChild(tempInput);
   };
 
+  const [isCopied, setIsCopied] = useState(false);
+
+  useEffect(() => {
+    if (isCopied) {
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2000);
+    }
+  }, [isCopied]);
+
   return (
     <footer
       className={"z-50 bg-rust text-background dark:text-foreground-dark py-8 grid-m gap-y-8"}
@@ -104,16 +115,71 @@ export default function Footer() {
         <h3 className={"text-caption uppercase opacity-[77%]"}>Get in touch</h3>
         <hgroup>
           <h4>Business inquiries</h4>
-          <div className="cursor-pointer" onClick={() => handleCopyEmail()}>
+          <motion.div
+            className="cursor-pointer"
+            onClick={() => handleCopyEmail()}
+            initial="initial"
+            animate="animate"
+            whileHover="hover"
+            whileTap="tap"
+          >
             <p className="opacity-[77%]">[email protected]</p>
             <motion.button
-              className="bg-background dark:bg-foreground-dark text-rust dark:text-rust-dark text-code--caption px-1.5 py-[0.15rem] rounded-sm"
-              whileHover={{ scale: 1.1 }}
-              whileTap={{ scale: [1.1, 0.9, 1.1], transition: { duration: 0.1 } }}
+              className="bg-background dark:bg-foreground-dark text-rust dark:text-rust-dark text-code--caption px-1.5 py-[0.15rem] rounded-sm w-20 h-4 flex flex-colitems-center justify-center overflow-hidden"
+              variants={{
+                initial: {
+                  scale: 1,
+                },
+                hover: {
+                  scale: 1.1,
+                },
+                tap: {
+                  scale: [1.1, 0.9, 1.1],
+                  transition: { duration: 0.15 },
+                },
+                animate: {
+                  background: isCopied ? ["var(--sol)", "var(--filament)"] : "var(--filament)",
+                  transition: {
+                    background: { duration: 0.5, ease: "circIn" },
+                  },
+                },
+              }}
             >
-              Copy email
+              <AnimatePresence mode="popLayout">
+                {isCopied ? (
+                  <motion.span
+                    className="block"
+                    variants={{
+                      initial: { opacity: 0, y: "100%" },
+                      animate: { opacity: 1, y: 0 },
+                      exit: { opacity: 0, y: "-100%" },
+                    }}
+                    initial="initial"
+                    animate="animate"
+                    exit="exit"
+                    key="copy-button--success"
+                  >
+                    Copied!
+                  </motion.span>
+                ) : (
+                  <motion.span
+                    className="block"
+                    variants={{
+                      initial: { opacity: 0, y: "100%" },
+                      animate: { opacity: 1, y: 0 },
+                      exit: { opacity: 0, y: "-100%" },
+                    }}
+                    initial="initial"
+                    animate="animate"
+                    exit="exit"
+                    key="copy-button--default"
+                  >
+                    Copy email
+                  </motion.span>
+                )}
+              </AnimatePresence>
             </motion.button>
-          </div>
+          </motion.div>
         </hgroup>
       </section>
       <FooterSectionList