Add latest supporters

package.json

@@ -65,6 +65,7 @@
     "react-slideshow-image": "^4.2.1",
     "react-sparklines-typescript-v2": "^1.3.6",
     "react-time-ago": "^7.2.1",
+    "react-timer-hook": "^3.0.6",
     "react-use": "^17.4.0",
     "recharts": "^2.6.2",
     "roarr": "^7.15.0",

src/components/SupportParseq.tsx

@@ -1,25 +1,48 @@
 import { faPatreon } from '@fortawesome/free-brands-svg-icons';
 import { faCoffee } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Chip, Stack, Typography } from '@mui/material';
-import { Fade } from 'react-slideshow-image';
-import 'react-slideshow-image/dist/styles.css'
+import { Chip, Fade, Stack, Typography } from '@mui/material';
+
 import { supporterList } from '../data/supporterList';
+import { useEffect, useState } from 'react';
 import _ from 'lodash';
 
+const SUPPORTER_DISPLAY_SECONDS = 10;
+const DEFAULT_SUPPORTER = { name: '(Your name here? Click to find out more. :) )', link: 'https://www.patreon.com/rewbs' };
 
 const Supporters = () => {
-    return (
-        <div className="slide-container" style={{paddingBottom:'0.25em' }}>
-          <Fade  duration={10000} arrows={false} >
-           { _.shuffle(supporterList).map((supporter, index)=> (
-              <div key={index}>
-                <Typography fontWeight={'bold'} fontSize='0.75em'> { supporter.link ? <a target='_blank' rel="noreferrer" href={supporter.link}>{supporter.name}</a> : supporter.name } </Typography>
-              </div>
-            ))} 
-          </Fade>
-        </div>
-      )
+    const [supporter, setSupporter] = useState<{name:string, link:string}>(DEFAULT_SUPPORTER);
+    const [shuffledSupporterList, setShuffledSupporterList] = useState(_.shuffle(supporterList));
+    const [fadeIn, setFadeIn] = useState(true);
+
+    const fadeSupporterTo = (supporter : {name:string, link:string}) => {
+        setFadeIn(false);
+        setTimeout(() => {
+            setFadeIn(true);
+            setSupporter(supporter);
+        }, 200);
+    }
+
+    useEffect(() => {
+        const timeout = setInterval(() => {
+            const newSupporter = shuffledSupporterList.pop();
+            if (newSupporter) {
+                fadeSupporterTo(newSupporter);
+            } else {
+                fadeSupporterTo(DEFAULT_SUPPORTER);
+                setShuffledSupporterList(_.shuffle(supporterList));
+            }
+        }, SUPPORTER_DISPLAY_SECONDS * 1000);
+        return () => clearInterval(timeout);
+    }, [shuffledSupporterList])
+
+    return <Fade in={fadeIn} appear={false} style={{paddingBottom:'0.5em'}}>
+            <Typography fontWeight={'bold'} fontSize='0.75em'> {
+                supporter.link
+                    ? <a target='_blank' rel="noreferrer" href={supporter.link}>{supporter.name}</a>
+                    :  supporter.name }
+            </Typography>
+        </Fade>
 }
 
 

src/data/supporterList.ts

@@ -1,5 +1,8 @@
 export const supporterList = [
-    { name: '(Your name here? Click to find out more. :) )', link: 'https://www.patreon.com/rewbs' },
     { name: 'Adam Sinclair', link: '' },
     { name: 'MJ', link: '' },
+    { name: 'AndyXT', link: 'https://youtube.com/channel/UCPAhnTuZQhGnCV46AVN3sdw' },
+    { name: 'King Kush', link: 'https://www.youtube.com/channel/UCisSpJBDQdIax6DTTMS0eDg' },
+    { name: 'Ben Del Vacchio', link: 'https://www.youtube.com/channel/UCisSpJBDQdIax6DTTMS0eDg'},
+    { name: 'Zirteq', link: 'https://youtube.com/@ZirTeq/videos' },  
 ]