GremiumPanel.tsx

import React, { useEffect, useRef, useState } from 'react'
import PanelWrapper from "../../meta/PanelWrapper";
import PanelContent from "../../meta/PanelContent";
import PanelTitle from '../../meta/PanelTitle'
import QRCode from "react-qr-code";
import { Clock, MapPin } from '@phosphor-icons/react'

export type GremiumPanelDefinition = {
    gremien: [Gremium]
}

type Gremium = {
    name: string,
    description: string,
    link: string,
    time: string,
    location: string
}

const GremiumPanel = (props: {definition: GremiumPanelDefinition}) => {
    const [gremium, setGremium] = useState<Gremium>(props.definition.gremien[0]);
    const cycle = useRef<number>(0);

    useEffect(() => {
        const update = async () => {
            setGremium(props.definition.gremien[cycle.current++ % props.definition.gremien.length]);
            console.log(gremium);
            console.log(cycle.current);
        }

        update();
        const interval = setInterval(update, 20 * 1000);

        return () => {
            clearInterval(interval);
        }
    }, []);

    return (
        <PanelWrapper>
            <PanelTitle title={gremium.name}/>
            <PanelContent>
                <div className={"relative h-full"}>
                    <div className={"absolute -top-12 right-0 p-1 bg-white rounded"}>
                        <QRCode value={gremium.link} className={"h-24 w-24"}/>
                    </div>
                    <div className={"absolute bottom-0"}>
                        <p>{gremium.description}</p>
                        <p className={"text-sm text-gray-400"}>
                            <Clock size={20} className={"inline mb-1.5 mr-1"}/>
                            {gremium.time}
                        </p>
                        <p className={"text-sm text-gray-400"}>
                            <MapPin size={20} className={"inline mb-1.5 mr-1"}/>
                            {gremium.location}
                        </p>
                    </div>
                </div>
            </PanelContent>
        </PanelWrapper>
    );
};

export default GremiumPanel;