guesstimate/client/src/components/tabs/index.tsx

import React, { FunctionComponent, useState, ReactNode } from "react";
import style from "./style.module.css";

export interface TabItem {
    label: string
    icon?: string
    render: () => ReactNode
}

export interface TabsProps {
    class?: string
    items: TabItem[]
}

const Tabs: FunctionComponent<TabsProps> = ({ items, ...props }) => {
    const [ selectedTabIndex, setSelectedTabIndex ] = useState(0);

    const onTabClick = (tabIndex: number) => {
        setSelectedTabIndex(tabIndex);
    };

    const selectedTab = items[selectedTabIndex];

    return (
        <div className={`${style.tabs} ${props.class}`}>
            <div className="tabs">
                <ul className={`noPrint`}>
                {
                    items.map((tabItem, tabIndex) => (
                        <li key={`tab-${tabIndex}`}
                            onClick={onTabClick.bind(null, tabIndex)}
                            className={`${selectedTabIndex === tabIndex ? 'is-active' : ''}`}>
                            <a>
                                <span className="icon is-small">{tabItem.icon}</span>
                                {tabItem.label}
                            </a>
                        </li>
                    ))
                }
                </ul>
            </div>
            <div className={style.tabContent}>
                { selectedTab.render() }
            </div>
        </div>
    );
};

export default Tabs;