46 lines
1.0 KiB
TypeScript
46 lines
1.0 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>
|
|
<div>
|
|
<div className="container navbar">
|
|
{tabs.map((tab, index) => (
|
|
<button
|
|
key={tab.id}
|
|
className={
|
|
currentIndex === index ? "tab-button active" : "tab-button"
|
|
}
|
|
onClick={() => handleTabClick(index)}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
{children.map((child, index) => (
|
|
<Fragment key={index}>
|
|
<div style={{ display: currentIndex === index ? "block" : "none" }}>
|
|
{child}
|
|
</div>
|
|
</Fragment>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|