From 460ae6580a3fd6053ad8f6327f8476d4f5c81afe Mon Sep 17 00:00:00 2001
From: Beau Findlay <beau@unhurd.co.uk>
Date: Wed, 24 Apr 2024 14:42:52 +0100
Subject: [PATCH] Extract social icons to component and add to mobile nav bar

---
 src/Client/src/components/Footer.tsx      | 26 ++----------------
 src/Client/src/components/NavBar.tsx      |  5 +++-
 src/Client/src/components/SocialIcons.tsx | 33 +++++++++++++++++++++++
 3 files changed, 39 insertions(+), 25 deletions(-)
 create mode 100644 src/Client/src/components/SocialIcons.tsx

diff --git a/src/Client/src/components/Footer.tsx b/src/Client/src/components/Footer.tsx
index 03c2711..706a944 100644
--- a/src/Client/src/components/Footer.tsx
+++ b/src/Client/src/components/Footer.tsx
@@ -1,4 +1,4 @@
-import { FaEnvelope, FaGithub, FaLinkedin } from "react-icons/fa6";
+import SocialIcons from "./SocialIcons";
 
 export default function Footer() {
   const currentYear = new Date().getFullYear();
@@ -7,29 +7,7 @@ export default function Footer() {
     <footer className="mt-auto">
       <div className="mx-auto py-8">
         <div className="md:flex md:items-center md:justify-between">
-          <div className="flex space-x-6 md:order-2">
-            <a
-              href="https://github.com/bdfin"
-              className="text-slate-200 hover:text-slate-500"
-            >
-              <span className="sr-only">GitHub</span>
-              <FaGithub size={20} />
-            </a>
-            <a
-              href="https://www.linkedin.com/in/beau-findlay/"
-              className="text-slate-200 hover:text-slate-500"
-            >
-              <span className="sr-only">LinkedIn</span>
-              <FaLinkedin size={20} />
-            </a>
-            <a
-              href="mailto:me@beaufindlay.com"
-              className="text-slate-200 hover:text-slate-500"
-            >
-              <span className="sr-only">Email</span>
-              <FaEnvelope size={20} />
-            </a>
-          </div>
+          <SocialIcons />
           <p className="mt-8 text-xs leading-5 text-slate-100 md:order-1 md:mt-0">
             &copy; {currentYear} Beau Findlay. All rights reserved.
           </p>
diff --git a/src/Client/src/components/NavBar.tsx b/src/Client/src/components/NavBar.tsx
index 380c1fd..e2d36c7 100644
--- a/src/Client/src/components/NavBar.tsx
+++ b/src/Client/src/components/NavBar.tsx
@@ -3,7 +3,7 @@ import { useState } from "react";
 import { FaBars, FaXmark } from "react-icons/fa6";
 import { NavLink } from "react-router-dom";
 import logo from "../assets/logo.webp";
-
+import SocialIcons from "./SocialIcons";
 
 export default function NavBar() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -77,6 +77,9 @@ export default function NavBar() {
                   This App
                 </NavLink>
               </div>
+              <div className="flex justify-center items-center py-8">
+                <SocialIcons size={24} />
+              </div>
             </div>
           </div>
         </Dialog.Panel>
diff --git a/src/Client/src/components/SocialIcons.tsx b/src/Client/src/components/SocialIcons.tsx
new file mode 100644
index 0000000..5f86245
--- /dev/null
+++ b/src/Client/src/components/SocialIcons.tsx
@@ -0,0 +1,33 @@
+import { FaEnvelope, FaGithub, FaLinkedin } from "react-icons/fa6";
+
+interface Props {
+  size?: number;
+}
+
+export default function SocialIcons({ size = 20 }: Props) {
+  return (
+    <div className="flex space-x-6 md:order-2">
+      <a
+        href="https://github.com/bdfin"
+        className="text-slate-200 hover:text-slate-500"
+      >
+        <span className="sr-only">GitHub</span>
+        <FaGithub size={size} />
+      </a>
+      <a
+        href="https://www.linkedin.com/in/beau-findlay/"
+        className="text-slate-200 hover:text-slate-500"
+      >
+        <span className="sr-only">LinkedIn</span>
+        <FaLinkedin size={size} />
+      </a>
+      <a
+        href="mailto:me@beaufindlay.com"
+        className="text-slate-200 hover:text-slate-500"
+      >
+        <span className="sr-only">Email</span>
+        <FaEnvelope size={size} />
+      </a>
+    </div>
+  );
+}