42 lines
1020 B
TypeScript
42 lines
1020 B
TypeScript
import { Fragment, ReactNode, useState } from "react";
|
|
|
|
interface TabProps {
|
|
id: string;
|
|
label: string;
|
|
}
|
|
|
|
interface TabControllerProps {
|
|
tabs: TabProps[];
|
|
children: ReactNode[];
|
|
}
|
|
|
|
export default function TabController({ tabs, children }: TabControllerProps) {
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
const handleTabClick = (index: number) => {
|
|
setCurrentIndex(index);
|
|
};
|
|
|
|
return (
|
|
<div className="block">
|
|
<div className="tabs is-boxed is-centered">
|
|
<ul>
|
|
{tabs.map((tab, index) => (
|
|
<li className={currentIndex === index ? "is-active" : ""}>
|
|
<a onClick={() => handleTabClick(index)}>{tab.label}</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
{children.map((child, index) => (
|
|
<Fragment key={index}>
|
|
<div style={{ display: currentIndex === index ? "block" : "none" }}>
|
|
{child}
|
|
</div>
|
|
</Fragment>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|