Create a TabBar component to render a list of tabs

src/features/tabs/Tab.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import {Menu} from "semantic-ui-react";
+
+const Tab = ({name, label, onClick, active}) => (
+    <Menu.Item
+        name={name}
+        content={label}
+        active={active}
+        onClick={() => onClick(name)}
+    />
+);
+
+export default Tab;

src/features/tabs/TabBar.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import {Menu} from "semantic-ui-react";
+
+import Tab from "./Tab";
+
+const TabBar = (props) => {
+    const {tabs, currentTab, onTabClick, ...otherProps} = props;
+
+    const tabItems = tabs.map(tabInfo => {
+        const {name, label} = tabInfo;
+
+        return (
+            <Tab
+                key={name}
+                name={name}
+                label={label}
+                active={currentTab === name}
+                onClick={onTabClick}
+            />
+        );
+    });
+
+    return (
+        <div>
+            <Menu tabular attached="top" {...otherProps}>
+                {tabItems}
+            </Menu>
+        </div>
+    )
+}
+
+export default TabBar;

src/features/tabs/TabBarContainer.jsx

@@ -0,0 +1,35 @@
+import React, {Component} from "react";
+
+import TabBar from "./TabBar";
+
+export default class TabBarContainer extends Component {
+    constructor(props) {
+        super(props);
+
+        const {tabs = [{name : null}]} = props;
+
+        const firstTab = tabs[0];
+
+        this.state = {
+            currentTab : firstTab.name
+        } ;
+    }
+
+    onTabClick = (name) => {
+        this.setState({currentTab : name});
+    }
+
+    render() {
+        const {tabs, ...otherProps} = this.props;
+        const {currentTab} = this.state;
+
+        return (
+            <TabBar
+                {...otherProps}
+                currentTab={currentTab}
+                onTabClick={this.onTabClick}
+                tabs={tabs}
+            />
+        )
+    }
+}