replace one paginate with radio buttons

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>