chore: moving file structure of components

src/components/Seek.js

@@ -0,0 +1,55 @@
+import React from "react"
+import styled from "@emotion/styled"
+import { withTheme } from "emotion-theming"
+
+import Icon from "components/Icon"
+import { H1 } from "components/elements"
+import { StyledLink as Link } from "components/elements"
+
+const SeekHeader = styled.header`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-color: ${props => props.theme.colors.quarternary};
+  margin-top: 15px;
+`
+const SeekArrows = styled.div`
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-gap: 10px;
+`
+
+const Seek = ({ title = "", prev = "", next = "", disableNext, theme }) => (
+  <SeekHeader>
+    <H1 color={theme.colors.secondary}>{title}</H1>
+    <SeekArrows>
+      <Link to={prev}>
+        <Icon name="ChevronLeft" />
+      </Link>
+      {disableNext ? (
+        <Icon
+          disabled={disableNext}
+          name="ChevronRight"
+          style={{
+            color: disableNext ? theme.colors.hover : theme.colors.secondary,
+          }}
+        />
+      ) : (
+        <Link to={next}>
+          <Icon
+            disabled={disableNext}
+            name="ChevronRight"
+            style={{
+              color: disableNext ? theme.colors.hover : theme.colors.secondary,
+            }}
+          />
+        </Link>
+      )}
+    </SeekArrows>
+  </SeekHeader>
+)
+
+export default withTheme(Seek)