fms/components/elements/tabs/index.tsx

import React, {FC, Fragment, useState} from "react";
import {Provider} from './context'
import {Mode, Provider as TabProvider} from './tab-context'

interface ITabs {
    children: React.ReactNode[];
    tabsClassName?: string;
    sectionsClassName?: string;
}

const Tabs: FC<ITabs> = ({children, tabsClassName, sectionsClassName}) => {
    const [tab, setTab] = useState<number>(0)
    const tabCount = children.length

    return (
        <div>
            <Provider value={{tabCount, tab, setTab}}>
                <div className={tabsClassName}>
                    {children.map((child: React.ReactNode, index: number) => {
                        return (
                            <Fragment key={index}>
                                <TabProvider value={{tab:index, mode: Mode.TABS}}>
                                    {child}
                                </TabProvider>
                            </Fragment>
                        )
                    })}
                </div>
                <div className={sectionsClassName}>
                    {children.map((child: React.ReactNode, index: number) => {
                        return (
                            <Fragment key={index}>
                                <TabProvider value={{tab:index, mode: Mode.SECTIONS }}>
                                    {child}
                                </TabProvider>
                            </Fragment>
                        )
                    })}
                </div>
            </Provider>
        </div>
    )
}

export default Tabs