Add footer and replace heroicons with react-icons

src/Client/package-lock.json

@@ -9,9 +9,9 @@
       "version": "0.0.0",
       "dependencies": {
         "@headlessui/react": "^1.7.19",
-        "@heroicons/react": "^2.1.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^5.1.0",
         "react-router-dom": "^6.23.0"
       },
       "devDependencies": {
@@ -888,14 +888,6 @@
         "react-dom": "^16 || ^17 || ^18"
       }
     },
-    "node_modules/@heroicons/react": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.3.tgz",
-      "integrity": "sha512-fEcPfo4oN345SoqdlCDdSa4ivjaKbk0jTd+oubcgNxnNgAfzysfwWfQUr+51wigiWHQQRiZNd1Ao0M5Y3M2EGg==",
-      "peerDependencies": {
-        "react": ">= 16"
-      }
-    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -3513,6 +3505,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.1.0.tgz",
+      "integrity": "sha512-D3zug1270S4hbSlIRJ0CUS97QE1yNNKDjzQe3HqY0aefp2CBn9VgzgES27sRR2gOvFK+0CNx/BW0ggOESp6fqQ==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",

src/Client/package.json

@@ -11,9 +11,9 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.19",
-    "@heroicons/react": "^2.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.1.0",
     "react-router-dom": "^6.23.0"
   },
   "devDependencies": {

src/Client/src/components/Footer.tsx

@@ -0,0 +1,40 @@
+import { FaEnvelope, FaGithub, FaLinkedin } from "react-icons/fa6";
+
+export default function Footer() {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <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>
+          <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>
+        </div>
+      </div>
+    </footer>
+  );
+}

src/Client/src/components/NavBar.tsx

@@ -1,16 +1,17 @@
 import { Dialog, Popover } from "@headlessui/react";
-import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useState } from "react";
+import { FaBars, FaXmark } from "react-icons/fa6";
 import { NavLink } from "react-router-dom";
 import logo from "../assets/logo.webp";
 
+
 export default function NavBar() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   return (
-    <header className="">
+    <header className="pt-6">
       <nav
-        className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
+        className="mx-auto flex max-w-7xl items-center justify-between"
         aria-label="Global"
       >
         <div className="flex lg:flex-1">
@@ -26,7 +27,7 @@ export default function NavBar() {
             onClick={() => setMobileMenuOpen(true)}
           >
             <span className="sr-only">Open main menu</span>
-            <Bars3Icon className="h-6 w-6" aria-hidden="true" />
+            <FaBars className="h-6 w-6" aria-hidden="true" />
           </button>
         </div>
         <Popover.Group className="hidden lg:flex lg:gap-x-12">
@@ -57,7 +58,7 @@ export default function NavBar() {
               onClick={() => setMobileMenuOpen(false)}
             >
               <span className="sr-only">Close menu</span>
-              <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+              <FaXmark className="h-6 w-6" aria-hidden="true" />
             </button>
           </div>
           <div className="mt-6 flow-root">

src/Client/src/pages/Layout.tsx

@@ -1,12 +1,17 @@
 import { Outlet } from "react-router-dom";
 import NavBar from "../components/NavBar";
+import Footer from "../components/Footer";
 
 export default function Layout() {
   return (
-    <div className="bg-black font-mono text-slate-50 min-h-screen antialiased">
+    <div className="bg-black font-mono text-slate-50 antialiased px-6 lg:px-8">
-      <NavBar />
+      <div className="flex flex-col min-h-screen mx-auto max-w-7xl fade-in ">
-      <div className="flex flex-col min-h-screen mx-auto max-w-7xl fade-in p-6 lg:px-8">
+        <NavBar />
-        <Outlet />
+        <div className="flex-1">
+          <Outlet />
+        </div>
+
+        <Footer />
       </div>
     </div>
   );