From c66b02b9e79ce1afbf6fee6d1809a59bbca7203b Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Tue, 1 Feb 2022 15:29:58 -0600
Subject: [PATCH 1/2] :sparkles: extract logo into separate component

---
 components/Logo.jsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 components/Logo.jsx

diff --git a/components/Logo.jsx b/components/Logo.jsx
new file mode 100644
index 0000000..e312d06
--- /dev/null
+++ b/components/Logo.jsx
@@ -0,0 +1,17 @@
+export default function Logo({ logoSrc, entityTitle }) {
+  return logoSrc ? (
+    <img
+      className="h-16"
+      src={logoSrc}
+      alt={`The ${entityTitle} logo`}
+      width="auto"
+      height="4rem"
+    />
+  ) : (
+    <div className="inline">
+      <h1 className="first-letter:text-indigo-800 first-letter:font-extrabold first-letter:text-5xl font-semibold tracking-wide text-indigo-500 text-2xl italic">
+        {entityTitle}
+      </h1>
+    </div>
+  );
+}

From b9ca8116a744eeb82fab36d04891df23b772401b Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Tue, 1 Feb 2022 15:30:01 -0600
Subject: [PATCH 2/2] :reyclce: refactor to use extracted Logo component

---
 components/Footer.jsx       |  9 ++-------
 components/MobileNavbar.jsx | 21 +++------------------
 components/Navbar.jsx       | 20 ++------------------
 3 files changed, 7 insertions(+), 43 deletions(-)

diff --git a/components/Footer.jsx b/components/Footer.jsx
index 49d52e8..be91e55 100644
--- a/components/Footer.jsx
+++ b/components/Footer.jsx
@@ -1,5 +1,6 @@
 import FooterColumn from "./FooterColumn";
 import Image from "next/image";
+import Logo from "./Logo";
 import { useState, useRef } from "react";
 
 export default function Footer({ entityTitle, logoSrc, footerItems, socials }) {
@@ -98,13 +99,7 @@ export default function Footer({ entityTitle, logoSrc, footerItems, socials }) {
         <div className="flex flex-wrap items-center">
           <div className="w-full lg:w-1/2 mb-6 lg:mb-0">
             <a className="text-gray-600 text-2xl leading-none" href="#">
-              <img
-                className="h-16"
-                src={logoSrc}
-                alt={`${entityTitle} logo`}
-                width="auto"
-                height="4rem"
-              />
+              <Logo logoSrc={logoSrc} entityTitle={entityTitle} />
             </a>
             <p className="hidden lg:block mt-3 text-sm text-gray-500">
               {`All rights reserved. © ${entityTitle} 2022`}
diff --git a/components/MobileNavbar.jsx b/components/MobileNavbar.jsx
index 6360e8f..122e09a 100644
--- a/components/MobileNavbar.jsx
+++ b/components/MobileNavbar.jsx
@@ -1,6 +1,7 @@
 import MobileNavigationItem from "./MobileNavigationItem";
 import { signIn, signOut } from "next-auth/react";
 import Link from "next/link";
+import Logo from "./Logo";
 
 export default function MobileNavbar({
   entityTitle,
@@ -31,21 +32,7 @@ export default function MobileNavbar({
                   onClick={() => setMobileMenuIsClicked(!mobileMenuIsClicked)}
                 >
                   {" "}
-                  {logoSrc ? (
-                    <img
-                      className="h-16"
-                      src={logoSrc}
-                      alt={`The ${entityTitle} logo`}
-                      width="auto"
-                      height="4rem"
-                    />
-                  ) : (
-                    <div className="inline">
-                      <h1 className="first-letter:font-extrabold first-letter:text-5xl font-bold tracking-wide text-indigo-700 text-3xl">
-                        {entityTitle}
-                      </h1>
-                    </div>
-                  )}
+                  <Logo logoSrc={logoSrc} entityTitle={entityTitle} />
                 </a>
               </Link>
               <button
@@ -128,9 +115,7 @@ export default function MobileNavbar({
             </div>
           </nav>
         </>
-      ) : (
-        <div className="transition duration-200" />
-      )}
+      ) : null}
     </div>
   );
 }
diff --git a/components/Navbar.jsx b/components/Navbar.jsx
index 7959f99..da79f4a 100644
--- a/components/Navbar.jsx
+++ b/components/Navbar.jsx
@@ -1,4 +1,5 @@
 import NavigationItem from "./NavigationItem";
+import Logo from "./Logo";
 import { signIn, signOut } from "next-auth/react";
 
 export default function Navbar({
@@ -11,27 +12,10 @@ export default function Navbar({
   mobileMenuIsClicked,
   setMobileMenuIsClicked,
 }) {
-  const [first, last] = [entityTitle?.slice(0, 1), entityTitle?.slice(1)];
-
   return (
     <nav className="flex justify-between items-center py-8">
       <a className="text-gray-700 text-2xl leading-none" href="#">
-        {!!logoSrc ? (
-          <img
-            className="h-16"
-            src={logoSrc}
-            alt={`The ${entityTitle} logo`}
-            width="auto"
-            height="4rem"
-          />
-        ) : (
-          <div className="inline">
-            <h1 className="font-extrabold tracking-wide text-indigo-700 text-5xl">
-              {first}
-              <span className="font-bold text-3xl">{last}</span>
-            </h1>
-          </div>
-        )}
+        <Logo logoSrc={logoSrc} entityTitle={entityTitle} />
       </a>
       <div className="lg:hidden">
         <button