clickeable emails

1 files changed, 6 insertions, 7 deletions

diff --git a/src/components/widgets/Steps2.astro b/src/components/widgets/Steps2.astro
index b37fbc0..e13a377 100644
--- a/src/components/widgets/Steps2.astro
+++ b/src/components/widgets/Steps2.astro
@@ -19,12 +19,11 @@ const {
   bg = await Astro.slots.render('bg'),
 } = Astro.props;
 
-// Function to detect and wrap email addresses in mailto links
-function processEmailLinks(text: string): string {
-  const emailRegex = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g;
-  return text.replace(emailRegex, (email) => {
-    return `<a href="mailto:${email}" class="text-primary hover:text-secondary transition-colors">${email}</a>`;
-  });
+// Function to make email addresses clickable
+function makeEmailsClickable(text: string | undefined): string {
+  if (!text) return '';
+  const emailRegex = /([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/g;
+  return text.replace(emailRegex, '<a href="mailto:$1" class="text-primary hover:text-secondary transition-colors">$1</a>');
 }
 ---
 
@@ -68,7 +67,7 @@ function processEmailLinks(text: string): string {
                   </div>
                   <div class="pl-4 rtl:pl-0 rtl:pr-4">
                     <h3 class="mb-4 text-xl font-semibold font-heading" set:html={title2} />
-                    <p class="text-muted dark:text-gray-400" set:html={description ? processEmailLinks(description) : ''} />
+                    <p class="text-muted dark:text-gray-400" set:html={description ? makeEmailsClickable(description) : ''} />
                   </div>
                 </li>
               ))