tabheader.tsx

import React, { useState } from "react";
import "./tabheader.css";

interface TabHeaderProps {
    tabs: string[];
    initialTabIndex?: number;
    children: React.ReactNode[];
}

function TabHeader({ tabs, initialTabIndex, children }: TabHeaderProps) {
    const [currentIndex, setCurrentIndex] = useState<number>(
        initialTabIndex ?? 0
    );
    return (
        <div className={"tab-view"}>
            <div className={"tab-header"}>
                {tabs.map((name: string, index: number) => (
                    <div
                        key={index}
                        className={
                            index === currentIndex
                                ? "tab-button tab-open"
                                : "tab-button"
                        }
                        onClick={() => setCurrentIndex(index)}
                    >
                        {name}
                    </div>
                ))}
            </div>
            <div>{children[currentIndex]}</div>
        </div>
    );
}

export default TabHeader;