ui(resources): style the TPH link

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>
+}

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;
+  }
+`

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>