50 lines
1.4 KiB
TypeScript
50 lines
1.4 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>
|
|
);
|
|
}
|