feat: add PageNavigation component

src/components/PageNavigation/index.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from "react"
+import * as SC from "./styles"
+
+interface IPageNavigationPage {
+  relativePath: string
+  title: string
+}
+
+interface IPageContentProps {
+  next?: IPageNavigationPage
+  previous?: IPageNavigationPage
+}
+
+export const PageNavigation: FC<IPageContentProps> = ({ previous, next }) => {
+  return (
+    <SC.PageNavigationContent>
+      {previous ? (
+        <SC.PageNavigationPageContent>
+          <SC.PageNavigationText>Previous</SC.PageNavigationText>
+          <SC.PageNavigationLink to={`/resources/${previous.relativePath}`}>
+            <SC.PreviousArrow />
+            <SC.PageNavigationPageTitle>
+              {previous.title}
+            </SC.PageNavigationPageTitle>
+          </SC.PageNavigationLink>
+        </SC.PageNavigationPageContent>
+      ) : (
+        <div> </div>
+      )}
+      {next ? (
+        <SC.PageNavigationPageContent>
+          <SC.PageNavigationText>Next</SC.PageNavigationText>
+          <SC.PageNavigationLink to={`/resources/${next.relativePath}`}>
+            <SC.PageNavigationPageTitle>
+              {next.title}
+            </SC.PageNavigationPageTitle>
+            <SC.NextArrow />
+          </SC.PageNavigationLink>
+        </SC.PageNavigationPageContent>
+      ) : (
+        <div> </div>
+      )}
+    </SC.PageNavigationContent>
+  )
+}

src/components/PageNavigation/styles.tsx

@@ -0,0 +1,72 @@
+import styled from "styled-components"
+import { Link } from "gatsby"
+import fontFamily from "../../design/typography"
+import ArrowRight from "../../icons/arrow-right.svg"
+
+export const PageNavigationContent = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+}
+`
+
+export const PageNavigationText = styled.p`
+  font-family: ${fontFamily.body};
+  font-weight: 700;
+  font-size: 18px;
+  margin: 0 19px 7px 17px;
+`
+
+export const PageNavigationLink = styled(Link)`
+  display: flex;
+  text-decoration: none;
+  text-align: right;
+
+  & > svg ~ p {
+    text-align: left;
+  }
+
+  &:hover,
+  &:focus {
+    color: ${(props) => props.theme.main.foreground};
+    text-decoration: underline;
+  }
+`
+
+export const PageNavigationPageContent = styled.div`
+  width: 200px;
+  display: flex;
+  flex-direction: column;
+
+  &:last-of-type {
+    align-items: flex-end;
+  }
+
+  & > div {
+    display: flex;
+    justify-content: start;
+  }
+`
+
+export const PageNavigationPageTitle = styled(PageNavigationText)`
+  margin: 0 10px;
+  margin-bottom: 0;
+  background: -webkit-linear-gradient(91.81deg, #feaf6d 0%, #ff70a5 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`
+
+export const NextArrow = styled(ArrowRight)`
+  width: 8px;
+  path {
+    fill: #ff74a2;
+  }
+`
+
+export const PreviousArrow = styled(ArrowRight)`
+  width: 8px;
+  transform: rotate(180deg);
+  path {
+    fill: #feac71;
+  }
+`