41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
|
|
import styles from "./ComponentSwitcher.module.css";
|
|
|
|
type ComponentSwitcherProps = {
|
|
buttonList: string[];
|
|
graphList: React.ReactNode[];
|
|
};
|
|
|
|
export function ComponentSwitcher({ buttonList, graphList }: ComponentSwitcherProps) {
|
|
const [selectedButton, setSelectedButton] = useState(buttonList[0]);
|
|
const [currentGraph, setCurrentGraph] = useState(graphList[0]);
|
|
const [currentGraphNumber, setCurrentGraphNumber] = useState(0);
|
|
|
|
const handleSwitch = (buttonName: string) => {
|
|
const graphIndex = buttonList.indexOf(buttonName);
|
|
setSelectedButton(buttonName);
|
|
setCurrentGraph(graphList[graphIndex]);
|
|
setCurrentGraphNumber(graphIndex);
|
|
};
|
|
|
|
useEffect(() => {
|
|
setCurrentGraph(graphList[currentGraphNumber]);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [graphList]);
|
|
|
|
return (
|
|
<div>
|
|
<div>{currentGraph}</div>
|
|
<div className={styles.btnContainer}>
|
|
{buttonList.map((buttonName, idx) => (
|
|
// we may also apply style if currently selected button === buttonName
|
|
<button key={idx} className={`${styles.btn} ${selectedButton === buttonName ? styles.selectedBtn : ""}`} onClick={() => handleSwitch(buttonName)}>
|
|
{buttonName}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|