51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
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 has-text-weight-bold" : ""
|
|
}
|
|
>
|
|
<a
|
|
className="has-text-black"
|
|
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>
|
|
);
|
|
}
|