From 9d62af51051652ca54208f91e2e3a3fbfeb719d3 Mon Sep 17 00:00:00 2001
From: Marco van Dijk <marco@stronk.rocks>
Date: Fri, 22 Apr 2022 16:23:36 +0200
Subject: [PATCH] replace one paginate with radio buttons

---
 src/pages/MonthlyStats.js | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/pages/MonthlyStats.js b/src/pages/MonthlyStats.js
index 631885e..314ea21 100644
--- a/src/pages/MonthlyStats.js
+++ b/src/pages/MonthlyStats.js
@@ -2,12 +2,19 @@ import React, { useState } from 'react';
 import MonthlyFactoids from '../components/MonthlyFactoids';
 import MonthlyGraphs from '../components/MonthlyGraphs';
 import MonthlyOrchestrators from '../components/MonthlyOrchestrators';
-
-import { Pagination } from "@mantine/core";
+import { RadioGroup, Radio } from "@mantine/core";
 
 const MonthlyStats = (obj) => {
   const [activePage, setPage] = useState(1);
-  const totalPages = 3;
+
+  let thisColour;
+  if (activePage == 1){
+    thisColour = "teal";
+  } else if (activePage == 2){
+    thisColour = "indigo";
+  } else if (activePage == 3){
+    thisColour = "red";
+  }
 
   return (
     <div className="stroke" key={obj.seed + "menu"}>
@@ -44,7 +51,18 @@ const MonthlyStats = (obj) => {
       }
       <div className="verticalDivider" />
       <div className="row" style={{ marginTop: '0.3em', marginBottom: '0.3em' }}>
-        <Pagination page={activePage} onChange={setPage} total={totalPages} siblings={1} initialPage={1} />
+        <RadioGroup
+          value={activePage}
+          onChange={setPage}
+          spacing="lg"
+          size="lg"
+          color={thisColour}
+          required
+        >
+          <Radio value="1" label="Summary" />
+          <Radio value="2" label="Graphs" />
+          <Radio value="3" label="Orchestrators" />
+        </RadioGroup>
       </div>
       <div className="verticalDivider" />
     </div>