Use copy email to clipboard as an action

Returns an event with the email to detect for value and timeouts

src/routes/about/+page.svelte

@@ -9,7 +9,7 @@
     import { fade, fly } from 'svelte/transition'
     import type { PageData } from './$types'
     import { animate, inView, stagger, timeline } from 'motion'
-    import { map } from '$utils/functions'
+    import { mailtoClipboard, map } from '$utils/functions'
     import { getAssetUrlKey } from '$utils/api'
     import { DELAY } from '$utils/contants'
     import { quartOut } from '$animations/easings'
@@ -39,27 +39,6 @@
         : [1, 4, 5, 7, 11, 14, 17, 20, 24, 27, 30, 33, 34, 36, 40, 43]
 
 
-    // Copy mailto links to clipboard and show message
-    const mailtoClipboard = (node: HTMLElement, options = { hideDelay: 2500 }) => {
-        const links = node.querySelectorAll('a[href^="mailto:"')
-        links.forEach(link => {
-            link.addEventListener('click', (event) => {
-                const emailAddress = event.currentTarget.href.split('mailto:')[1].split('?')[0]
-                emailCopied = emailAddress
-
-                // Copy email to clipboard
-                navigator.clipboard.writeText(emailAddress)
-
-                // Hide message after a delay
-                clearTimeout(emailCopiedTimeout)
-                emailCopiedTimeout = setTimeout(() => emailCopied = null, options.hideDelay)
-
-                event.preventDefault()
-            })
-        })
-    }
-
-
     onMount(() => {
         /**
          * Animations
@@ -387,9 +366,16 @@
                         <div class="button-container">
                             {#if link}
                             {#key emailCopied === link}
-                                <div class="wrap" use:mailtoClipboard
+                                <div class="wrap"
                                     in:fly={{ y: 4, duration: 325, easing: quartOutSvelte, delay: 250 }}
                                     out:fade={{ duration: 250, easing: quartOutSvelte }}
+                                    use:mailtoClipboard
+                                    on:copied={({ detail }) => {
+                                        emailCopied = detail.email
+                                        // Clear timeout and add timeout to hide message
+                                        clearTimeout(emailCopiedTimeout)
+                                        emailCopiedTimeout = setTimeout(() => emailCopied = null, 2500)
+                                    }}
                                 >
                                     {#if emailCopied !== link}
                                         <Button size="small" url="mailto:{link}" text={button} />