From 94f8c5317d01feeb0a32cc32b6123fa9cc3ca4dd Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Tue, 17 Sep 2019 01:17:16 -0400
Subject: [PATCH] ui(resources): style the TPH link

---
 src/components/ResourcesLink/index.tsx  | 11 +++++++++++
 src/components/ResourcesLink/styles.tsx | 16 ++++++++++++++++
 src/pages/resources.tsx                 |  4 ++--
 3 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ResourcesLink/index.tsx
 create mode 100644 src/components/ResourcesLink/styles.tsx

diff --git a/src/components/ResourcesLink/index.tsx b/src/components/ResourcesLink/index.tsx
new file mode 100644
index 0000000..671711e
--- /dev/null
+++ b/src/components/ResourcesLink/index.tsx
@@ -0,0 +1,11 @@
+import React, { PropsWithChildren } from "react"
+import * as SC from "./styles"
+
+export function ResourcesLink({
+  children,
+  to,
+}: PropsWithChildren<{
+  to: string
+}>) {
+  return <SC.ResourcesLinkWrapper to={to}>{children}</SC.ResourcesLinkWrapper>
+}
diff --git a/src/components/ResourcesLink/styles.tsx b/src/components/ResourcesLink/styles.tsx
new file mode 100644
index 0000000..11ddcaf
--- /dev/null
+++ b/src/components/ResourcesLink/styles.tsx
@@ -0,0 +1,16 @@
+import { Link } from "gatsby"
+import styled from "styled-components"
+
+export const ResourcesLinkWrapper = styled(Link)`
+  color: #0090d8;
+  font-weight: 700;
+  border-bottom: 2px solid;
+  text-decoration: none;
+  transition: color 0.3s;
+
+  &:hover,
+  &:focus {
+    color: #5dbbea;
+    transition: none;
+  }
+`
diff --git a/src/pages/resources.tsx b/src/pages/resources.tsx
index 1f8ec2c..ed723c7 100644
--- a/src/pages/resources.tsx
+++ b/src/pages/resources.tsx
@@ -1,6 +1,6 @@
-import { Link } from "gatsby"
 import React, { Fragment } from "react"
 
+import { ResourcesLink } from "../components/ResourcesLink"
 import { ResourcesList } from "../components/ResourcesList"
 import { SEO } from "../components/SEO"
 
@@ -12,7 +12,7 @@ function ResourcesPage() {
       <p>
         This is meant as a small knowledge base for commonly answered questions
         on our Discord community,{" "}
-        <Link to="/about">The Programmer's Hangout</Link>.
+        <ResourcesLink to="/about">The Programmer's Hangout</ResourcesLink>.
       </p>
       <ResourcesList />
     </Fragment>