30 lines
654 B
TypeScript
30 lines
654 B
TypeScript
import "./index.css";
|
|
interface Name {
|
|
name: string;
|
|
}
|
|
interface nameListProps {
|
|
nameList: Name[];
|
|
activeName: string;
|
|
setActiveName: (name: string) => void;
|
|
}
|
|
function SwitchButton(props: nameListProps) {
|
|
return (
|
|
<div className="switch-button">
|
|
{props.nameList.map((item, index) => {
|
|
return (
|
|
<button
|
|
key={item.name}
|
|
className={props.activeName === item.name ? "active" : ""}
|
|
onClick={() => {
|
|
props.setActiveName(item.name);
|
|
}}
|
|
>
|
|
{item.name}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
export default SwitchButton;
|