From 2a0c1a5739a10d9e2eaf0229b16b6936cafd1b4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Skolak?= <skolakmichal1@gmail.com>
Date: Tue, 13 Aug 2024 15:23:36 +0200
Subject: [PATCH] refactor: make email clickable (#44)

---
 src/components/contact.tsx         | 18 +++++++++++++++++-
 src/components/section-heading.tsx |  4 +++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/contact.tsx b/src/components/contact.tsx
index 9b2287d..6607a80 100644
--- a/src/components/contact.tsx
+++ b/src/components/contact.tsx
@@ -54,7 +54,23 @@ export const Contact = () => {
     >
       <SectionHeading
         heading="Get In Touch"
-        content="Please contact me directly at skolakmichal1@gmail.com or through this form."
+        content={
+          <>
+            Please contact me directly at{' '}
+            <Button
+              variant="link"
+              className="text-muted-foreground p-0 font-medium"
+            >
+              <a
+                className="underline-offset-4 hover:underline"
+                href="mailto:skolakmichal1@gmail.com"
+              >
+                skolakmichal1@gmail.com
+              </a>
+            </Button>{' '}
+            or through this form.
+          </>
+        }
       />
       <form
         onSubmit={handleSubmit(onSubmit)}
diff --git a/src/components/section-heading.tsx b/src/components/section-heading.tsx
index 665d06a..b425c69 100644
--- a/src/components/section-heading.tsx
+++ b/src/components/section-heading.tsx
@@ -1,6 +1,8 @@
+import { ReactNode } from 'react';
+
 type TProps = {
   heading: string;
-  content?: string | undefined;
+  content?: string | ReactNode | undefined;
 };
 
 export const SectionHeading = ({ heading, content }: TProps) => {