andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Links: extract external navigation links component

Browse Source 
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!
This commit is contained in:
rektdeckard
2020-10-10 16:03:26 -04:00
parent 413aa24d3b
commit 1a2c3ef1de
5 changed files with 128 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/Footer/Footer.tsx
View File

@@ -1,12 +1,10 @@
import React from "react";
import { ArrowElbowDownRight, Coffee, Heart } from "phosphor-react";
import { OutboundLink } from "react-ga";
import { Coffee, Heart } from "phosphor-react";
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 commandKeySpec from "../../assets/command-key-spec.svg";
import Links from "../Links/Links";
import "./Footer.css";
type FooterProps = {};
@@ -35,73 +33,7 @@ const Footer: React.FC<FooterProps> = () => {
src={commandKey}
alt=""
/> */}
<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"
>
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>
<Links />
<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