Links: extract external navigation links component

The Header and Footer shared some duplicated code related to external
links. We moved the markup and CSS into a separate Links component to
DRY it up.

We currently apply a 'line-through' style to the Figma links, since they
are not yet implemented. This is a visual treatment only an needs fixed
before production release!

src/components/App/App.css

@@ -113,45 +113,3 @@ a.main-link:after {
 a.main-link:hover:after {
   width: 0%;
 }
-
-.links {
-  display: flex;
-  flex-flow: column wrap;
-  align-content: flex-start;
-  align-items: flex-start;
-  justify-content: center;
-  /* column-gap: 72px; */
-  /* -webkit-column-gap: 72px; */
-  margin: 32px 0 64px;
-  max-height: 144px;
-}
-
-.links > div {
-  margin: 0 72px 24px 0;
-  display: flex;
-  align-items: center;
-}
-
-.links svg {
-  margin-right: 12px;
-}
-
-a.nav-link {
-  text-decoration: none;
-  position: relative;
-  color: black;
-}
-
-a.nav-link:after {
-  content: "";
-  position: absolute;
-  bottom: -2px;
-  left: 0;
-  width: 0%;
-  border-bottom: 1px solid black;
-  transition: 0.2s;
-}
-
-a.nav-link:hover:after {
-  width: 100%;
-}

src/components/Footer/Footer.tsx

@@ -1,12 +1,10 @@
 import React from "react";
-import { ArrowElbowDownRight, Coffee, Heart } from "phosphor-react";
+import { Coffee, Heart } from "phosphor-react";
-import { OutboundLink } from "react-ga";
 
 import uArrowUpLeft from "../../assets/u-arrow-up-left.svg";
 import markerGreen from "../../assets/marker-green.svg";
 import postIt from "../../assets/footer-mobile.svg";
-// import commandKey from "../../assets/command-key.svg";
+import Links from "../Links/Links";
-// import commandKeySpec from "../../assets/command-key-spec.svg";
 import "./Footer.css";
 
 type FooterProps = {};
@@ -35,73 +33,7 @@ const Footer: React.FC<FooterProps> = () => {
             src={commandKey}
             alt=""
           /> */}
-          <div className="links">
+          <Links />
-            <div>
-              <ArrowElbowDownRight size={24} />
-              <OutboundLink
-                className="nav-link"
-                to="https://phosphoricons.com/assets/phosphor-icons.zip"
-                eventLabel="Download all"
-                download
-                type="application/zip"
-              >
-                Download all
-              </OutboundLink>
-            </div>
-            <div>
-              <ArrowElbowDownRight size={24} />
-              <OutboundLink
-                className="nav-link"
-                to="#"
-                eventLabel="Figma library"
-              >
-                Figma library
-              </OutboundLink>
-            </div>
-            <div>
-              <ArrowElbowDownRight size={24} />
-              <OutboundLink
-                className="nav-link"
-                to="#"
-                eventLabel="Figma plugin"
-              >
-                Figma plugin
-              </OutboundLink>
-            </div>
-            <div>
-              <ArrowElbowDownRight size={24} />
-              <a
-                className="nav-link"
-                href="https://github.com/phosphor-icons/phosphor-web/issues"
-              >
-                Request an icon
-              </a>
-            </div>
-            <div>
-              <ArrowElbowDownRight size={24} />
-              <span>
-                <a className="nav-link" href="https://paypal.me/minoraxis">
-                  Donate on PayPal
-                </a>
-                {" / "}
-                <a
-                  className="nav-link"
-                  href="https://patreon.com/phosphoricons"
-                >
-                  Patreon
-                </a>
-              </span>
-            </div>
-            <div>
-              <ArrowElbowDownRight size={24} />
-              <a
-                className="nav-link"
-                href="https://github.com/phosphor-icons/phosphor-web"
-              >
-                Github
-              </a>
-            </div>
-          </div>
           <p>
             We designed the icon library we always wanted to use. Easy to pick
             up and plug in. Truly consistent in style and scale. Flexible to

src/components/Header/Header.tsx

@@ -1,12 +1,6 @@
 import React from "react";
-import {
+import { ArrowCircleUpRight, ArrowCircleDown } from "phosphor-react";
-  ArrowCircleUpRight,
-  ArrowCircleDown,
-  ArrowElbowDownRight,
-} from "phosphor-react";
-import { OutboundLink } from "react-ga";
 
-import "./Header.css";
 import markerPurple from "../../assets/marker-purple.svg";
 import paperclips from "../../assets/paperclips-header-mobile.svg";
 import paperclipsThree from "../../assets/paperclips-header.svg";
@@ -22,6 +16,8 @@ import receipt from "../../assets/receipt.svg";
 import receiptSpec from "../../assets/receipt-spec.svg";
 import calculator from "../../assets/calculator.svg";
 import calculatorSpec from "../../assets/calculator-spec.svg";
+import Links from "../Links/Links";
+import "./Header.css";
 
 type HeaderProps = {};
 
@@ -74,73 +70,7 @@ const Header: React.FC<HeaderProps> = () => {
               Explore icons
             </button>
           </div>
-          <div className="links">
+          <Links />
-            <div>
-              <ArrowElbowDownRight size={24} />
-              <OutboundLink
-                className="nav-link"
-                to="https://phosphoricons.com/assets/phosphor-icons.zip"
-                eventLabel="Download all"
-                download
-                type="application/zip"
-              >
-                Download all
-              </OutboundLink>
-            </div>
-            <div>
-              <ArrowElbowDownRight size={24} />
-              <OutboundLink
-                className="nav-link"
-                to="#"
-                eventLabel="Figma library"
-              >
-                Figma library
-              </OutboundLink>
-            </div>
-            <div>
-              <ArrowElbowDownRight size={24} />
-              <OutboundLink
-                className="nav-link"
-                to="#"
-                eventLabel="Figma plugin"
-              >
-                Figma plugin
-              </OutboundLink>
-            </div>
-            <div>
-              <ArrowElbowDownRight size={24} />
-              <a
-                className="nav-link"
-                href="https://github.com/phosphor-icons/phosphor-web/issues"
-              >
-                Request an icon
-              </a>
-            </div>
-            <div>
-              <ArrowElbowDownRight size={24} />
-              <span>
-                <a className="nav-link" href="https://paypal.me/minoraxis">
-                  Donate on PayPal
-                </a>
-                {" / "}
-                <a
-                  className="nav-link"
-                  href="https://patreon.com/phosphoricons"
-                >
-                  Patreon
-                </a>
-              </span>
-            </div>
-            <div>
-              <ArrowElbowDownRight size={24} />
-              <a
-                className="nav-link"
-                href="https://github.com/phosphor-icons/phosphor-web"
-              >
-                Github
-              </a>
-            </div>
-          </div>
         </div>
         <div className="illustrations-bottom">
           <img id="cutting-mat" src={cuttingMatSpec} alt="" />

src/components/Links/Links.css

@@ -0,0 +1,41 @@
+.links {
+  display: flex;
+  flex-flow: column wrap;
+  align-content: flex-start;
+  align-items: flex-start;
+  justify-content: center;
+  /* column-gap: 72px; */
+  /* -webkit-column-gap: 72px; */
+  margin: 32px 0 64px;
+  max-height: 144px;
+}
+
+.links > div {
+  margin: 0 72px 24px 0;
+  display: flex;
+  align-items: center;
+}
+
+.links svg {
+  margin-right: 12px;
+}
+
+a.nav-link {
+  text-decoration: none;
+  position: relative;
+  color: black;
+}
+
+a.nav-link:after {
+  content: "";
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0%;
+  border-bottom: 1px solid black;
+  transition: 0.2s;
+}
+
+a.nav-link:hover:after {
+  width: 100%;
+}

src/components/Links/Links.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { OutboundLink } from "react-ga";
+import { ArrowElbowDownRight } from "phosphor-react";
+
+import "./Links.css";
+
+interface LinksProps {}
+
+const Links: React.FC<LinksProps> = () => {
+  return (
+    <div className="links">
+      <div>
+        <ArrowElbowDownRight size={24} />
+        <OutboundLink
+          className="nav-link"
+          to="https://phosphoricons.com/assets/phosphor-icons.zip"
+          eventLabel="Download all"
+          download
+          type="application/zip"
+        >
+          Download all
+        </OutboundLink>
+      </div>
+      <div>
+        <ArrowElbowDownRight size={24} />
+        <OutboundLink
+          className="nav-link"
+          to="#"
+          eventLabel="Figma library"
+          style={{ textDecoration: "line-through" }}
+        >
+          Figma library
+        </OutboundLink>
+      </div>
+      <div>
+        <ArrowElbowDownRight size={24} />
+        <OutboundLink
+          className="nav-link"
+          to="#"
+          eventLabel="Figma plugin"
+          style={{ textDecoration: "line-through" }}
+        >
+          Figma plugin
+        </OutboundLink>
+      </div>
+      <div>
+        <ArrowElbowDownRight size={24} />
+        <a
+          className="nav-link"
+          href="https://github.com/phosphor-icons/phosphor-web/issues"
+        >
+          Request an icon
+        </a>
+      </div>
+      <div>
+        <ArrowElbowDownRight size={24} />
+        <span>
+          <a className="nav-link" href="https://paypal.me/minoraxis">
+            Donate on PayPal
+          </a>
+          {" / "}
+          <a className="nav-link" href="https://patreon.com/phosphoricons">
+            Patreon
+          </a>
+        </span>
+      </div>
+      <div>
+        <ArrowElbowDownRight size={24} />
+        <a
+          className="nav-link"
+          href="https://github.com/phosphor-icons/phosphor-web"
+        >
+          Github
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default Links;