Merge pull request #7 from yoanbernabeu/3-add-area-for-phone-number-a…

…nd-for-email

📦 NEW: Contact buttons (Phone + Email)

README.md

@@ -18,7 +18,7 @@ You can see a demo of the project at [https://linktreefreeclone.yoandev.co/](htt
 
 1. **Customize your general settings**
 
-   Open `src/config.ts` and edit the `SUBTITLE', 'TITLE' and 'TAGLINE' variables.
+   Open `src/config.ts` and edit the `SUBTITLE`, `TITLE`, `TAGLINE`, `contact`, `phone` and `email` variables.
 
 2. **Customize your links**
 

src/components/Contact.astro

@@ -0,0 +1,34 @@
+---
+export interface Props {
+	contact: string;
+	phone: string;
+	email: string;
+}
+
+const { contact, phone, email } = Astro.props;
+---
+<div>
+    <div
+        class="mx-auto max-w-7xl py-12 px-4 text-center sm:px-6 lg:py-16 lg:px-8"
+    >
+        <h2 class="text-2xl font-bold tracking-tight text-indigo-300 sm:text-2xl">
+            <span class="block">{contact}</span>
+        </h2>
+        <div class="mt-5 flex justify-center">
+            <div class="inline-flex rounded-md shadow">
+                <a
+                    href={"tel://"+phone}
+                    class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-100 px-5 py-3 text-base font-medium text-indigo-700 hover:bg-indigo-200 shadow-md hover:shadow-xl"
+                    >☎️ Call me</a
+                >
+            </div>
+            <div class="ml-3 inline-flex">
+                <a
+                    href={"mailto://"+email}
+                    class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-100 px-5 py-3 text-base font-medium text-indigo-700 hover:bg-indigo-200 shadow-md hover:shadow-xl"
+                    >📪 Email me</a
+                >
+            </div>
+        </div>
+    </div>
+</div>

src/config.ts

@@ -1,3 +1,8 @@
 export const SUBTITLE = "A free clone of LinkTree"
 export const TITLE = "LinkTreeFreeClone"
-export const TAGLINE = "Make your own LinkTree page for free"
+export const TAGLINE = "Make your own LinkTree page for free"
+
+// Contacts
+export const contact = "Keep in touch"
+export const phone = "+33600000000"
+export const email = "[email protected]"

src/pages/index.astro

@@ -3,8 +3,16 @@ import Layout from "../layouts/Layout.astro";
 import Header from "../components/Header.astro";
 import Link from "../components/Link.astro";
 import Footer from "../components/Footer.astro";
+import Contact from "../components/Contact.astro";
 
-import { SUBTITLE, TITLE, TAGLINE } from "../config";
+import { 
+    SUBTITLE, 
+    TITLE, 
+    TAGLINE,
+    contact,
+    phone,
+    email
+} from "../config";
 
 // fetch all Markdown files in the links directory
 const links = await Astro.glob("./links/*.md");
@@ -32,6 +40,12 @@ const links = await Astro.glob("./links/*.md");
         </div>
     </section>
 
+    <Contact
+        contact={contact}
+        phone={phone}
+        email={email}
+    />
+
 	<Footer
 		title={TITLE}
 		tagline={TAGLINE}

tests/index.spec.ts

@@ -17,4 +17,9 @@ test('homepage has title and links', async ({ page }) => {
   const blog = page.getByRole('link', { name: '📝 Blog' });
   await expect(blog).toHaveAttribute('href', 'https://yoandev.co');
 
+  const phone = page.getByRole('link', { name: '☎️ Call me' });
+  await expect(phone).toHaveAttribute('href', 'tel://+33600000000');
+
+  const email = page.getByRole('link', { name: '📪 Email me' });
+  await expect(email).toHaveAttribute('href', 'mailto://[email protected]');
 });