heroku deploy

src/assets/polygon.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6L9 0.803848L9 11.1962L0 6Z" fill="#343434"/>
+</svg>

src/components/elements/Pager.js

@@ -0,0 +1,22 @@
+import React from "react";
+import {FlexRow, Svg} from "../../utils/containers";
+import CircleNumber from "./CircleNumber";
+import polygon from '../../assets/polygon.svg';
+import styled from "styled-components";
+
+const RotatedSvg = styled(Svg)`
+  transform: rotate(180deg);
+  cursor: pointer;
+`;
+
+const Pager = (props) => {
+    return (
+        <FlexRow gap='14px'>
+            <Svg as='button' src={polygon} cursor='pointer'/>
+            <CircleNumber number={props.number}/>
+            <RotatedSvg as='button' src={polygon}/>
+        </FlexRow>
+    );
+}
+
+export default Pager;

src/pages/Challenges.js

@@ -6,6 +6,7 @@ import MiniChallenge from "../components/elements/MiniChallenge";
 import textIco from '../assets/text_ico.svg';
 import tabularIco from '../assets/tabular_ico.svg';
 import imageIco from '../assets/image_ico.svg';
+import Pager from "../components/elements/Pager";
 
 const Challenges = () => {
     return (
@@ -25,6 +26,7 @@ const Challenges = () => {
                                    describe={`Guess publication location for a piece of text.`}/>
                 </Grid>
             </FlexColumn>
+            <Pager number={1}/>
         </FlexColumn>
     );
 }