Add social links to navbar (#25)

components/NavBar.tsx

@@ -1,17 +1,34 @@
+import {
+  faGithub,
+  faTwitch,
+  faTwitter,
+} from '@fortawesome/free-brands-svg-icons';
+import NavBarExternalLink from './NavBarExternalLink';
 import NavBarLink from './NavBarLink';
 
 function NavBar() {
   return (
-    <nav className="pl-6 h-16 w-full flex items-center bg-gray-900 dark:bg-black shadow-lg z-10 fixed top-0 overflow-auto">
-      <NavBarLink label="Home" href="/" />
-      <NavBarLink label="Blog" href="/blog" />
-      <NavBarLink label="About" href="/about" />
-      <NavBarLink
-        label="GitHub"
-        href="https://github.com/devinshoemaker"
-        external={true}
-      />
-    </nav>
+    <div className="flex justify-between items-center px-6 h-16 w-full bg-gray-900 dark:bg-black shadow-lg z-10 fixed top-0 overflow-auto">
+      <nav className="flex">
+        <NavBarLink label="Home" href="/" />
+        <NavBarLink label="Blog" href="/blog" />
+        <NavBarLink label="About" href="/about" />
+      </nav>
+      <div className="flex">
+        <NavBarExternalLink
+          href="https://twitch.tv/paranoidcoder"
+          icon={faTwitch}
+        />
+        <NavBarExternalLink
+          href="https://twitter.com/paranoidcoder"
+          icon={faTwitter}
+        />
+        <NavBarExternalLink
+          href="https://github.com/devinshoemaker"
+          icon={faGithub}
+        />
+      </div>
+    </div>
   );
 }
 

components/NavBarExternalLink.tsx

@@ -0,0 +1,22 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from 'react';
+
+interface NavBarExternalLinkProps {
+  href: string;
+  icon: IconProp;
+}
+
+function NavBarExternalLink({ href, icon }: NavBarExternalLinkProps) {
+  return (
+    <a href={href} target="blank" className="ml-6">
+      <FontAwesomeIcon
+        icon={icon}
+        color="white"
+        className="h-8 text-gray-900 dark:text-gray-100"
+      />
+    </a>
+  );
+}
+
+export default NavBarExternalLink;

components/NavBarLink.tsx

@@ -3,21 +3,14 @@ import Link from 'next/link';
 interface NavBarLinkProps {
   href: string;
   label: string;
-  external?: boolean;
 }
 
-function NavBarLink({ label, href, external = false }: NavBarLinkProps) {
+function NavBarLink({ label, href }: NavBarLinkProps) {
   return (
     <ul style={{ height: 'fit-content' }}>
-      {external ? (
-        <a href={href} target="blank" className="mr-4 text-xl text-gray-100">
-          {label}
-        </a>
-      ) : (
-        <Link href={href}>
-          <a className="mr-4 text-xl text-gray-100">{label}</a>
-        </Link>
-      )}
+      <Link href={href}>
+        <a className="mr-4 text-xl text-gray-100">{label}</a>
+      </Link>
     </ul>
   );
 }

package.json

@@ -11,6 +11,9 @@
     "format:check": "prettier '**/*.(js|jsx|ts|tsx|json|css|scss|md|mdx|html)' --check"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.34",
+    "@fortawesome/free-brands-svg-icons": "^5.15.2",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "autoprefixer": "^10.2.3",
     "date-fns": "^2.16.1",
     "gray-matter": "^4.0.2",

yarn.lock

@@ -106,6 +106,32 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fortawesome/fontawesome-common-types@^0.2.34":
+  version "0.2.34"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz#0a8c348bb23b7b760030f5b1d912e582be4ec915"
+  integrity sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA==
+
+"@fortawesome/fontawesome-svg-core@^1.2.34":
+  version "1.2.34"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.34.tgz#1d1a7c92537cbc2b8a83eef6b6d824b4b5b46b26"
+  integrity sha512-0KNN0nc5eIzaJxlv43QcDmTkDY1CqeN6J7OCGSs+fwGPdtv0yOQqRjieopBCmw+yd7uD3N2HeNL3Zm5isDleLg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.34"
+
+"@fortawesome/free-brands-svg-icons@^5.15.2":
+  version "5.15.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.2.tgz#d74e2540b5552b915d6bef719f17e361b70a8d65"
+  integrity sha512-YPlVjE1cEO+OJ9I9ay3TQ3I88+XkxMTYwnnddqAboxLhPNGncsHV0DjWOVLCyuAY66yPfyndWwVn4v7vuqsO1g==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.34"
+
+"@fortawesome/react-fontawesome@^0.1.14":
+  version "0.1.14"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz#bf28875c3935b69ce2dc620e1060b217a47f64ca"
+  integrity sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==
+  dependencies:
+    prop-types "^15.7.2"
+
 "@fullhuman/postcss-purgecss@^3.0.0":
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz#47af7b87c9bfb3de4bc94a38f875b928fffdf339"