Pager state and pages

src/components/elements/Pager.js

@@ -3,18 +3,43 @@ import {FlexRow, Svg} from "../../utils/containers";
 import CircleNumber from "./CircleNumber";
 import polygon from '../../assets/polygon.svg';
 import styled from "styled-components";
+import theme from "../../utils/theme";
 
-const RotatedSvg = styled(Svg)`
+const LeftArrow = styled(Svg)`
+  background-color: ${({backgroundColor}) => backgroundColor};
+  cursor: ${({backgroundColor}) => (backgroundColor === 'transparent') ? 'auto' : 'pointer'};
+`;
+
+const RightArrow = styled(Svg)`
+  display: ${({display}) => display};
   transform: rotate(180deg);
-  cursor: pointer;
+  cursor: ${({backgroundColor}) => (backgroundColor === 'transparent') ? 'auto' : 'pointer'};
 `;
 
 const Pager = (props) => {
+    const [page, setPage] = React.useState(1);
+
+    const nextPage = () => {
+        if (page !== props.pages) {
+            let newPage = page + 1;
+            setPage(newPage);
+        }
+    }
+
+    const previousPage = () => {
+        if (page !== 1) {
+            let newPage = page - 1;
+            setPage(newPage);
+        }
+    }
+
     return (
         <FlexRow gap='14px'>
-            <Svg as='button' src={polygon} cursor='pointer'/>
+            <LeftArrow as='button' src={polygon} onClick={previousPage}
-            <CircleNumber number={props.number}/>
+                       backgroundColor={(page === 1) ? 'transparent' : theme.colors.dark}/>
-            <RotatedSvg as='button' src={polygon}/>
+            <CircleNumber number={page}/>
+            <RightArrow as='button' src={polygon} onClick={nextPage}
+                        backgroundColor={(page === props.pages) ? 'transparent' : theme.colors.dark}/>
         </FlexRow>
     );
 }

src/pages/Challenges.js

@@ -26,7 +26,7 @@ const Challenges = () => {
                                    describe={`Guess publication location for a piece of text.`}/>
                 </Grid>
             </FlexColumn>
-            <Pager number={1}/>
+            <Pager pages={5}/>
         </FlexColumn>
     );
 }