From 6b1c8087c3e2abfb107f49618f893237bbcceccb Mon Sep 17 00:00:00 2001
From: mattyl006 <mattyl@st.amu.edu.pl>
Date: Fri, 8 Jul 2022 09:25:38 +0200
Subject: [PATCH] heroku deploy

---
 src/assets/polygon.svg           |  3 +++
 src/components/elements/Pager.js | 22 ++++++++++++++++++++++
 src/pages/Challenges.js          |  2 ++
 3 files changed, 27 insertions(+)
 create mode 100644 src/assets/polygon.svg
 create mode 100644 src/components/elements/Pager.js

diff --git a/src/assets/polygon.svg b/src/assets/polygon.svg
new file mode 100644
index 0000000..fba4a2d
--- /dev/null
+++ b/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>
diff --git a/src/components/elements/Pager.js b/src/components/elements/Pager.js
new file mode 100644
index 0000000..ce7f5ba
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/pages/Challenges.js b/src/pages/Challenges.js
index 474e17c..217cdb2 100644
--- a/src/pages/Challenges.js
+++ b/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>
     );
 }