add solution

src/App.jsx

@@ -1,44 +1,46 @@
-import React from 'react';
+import React, { useState } from 'react';
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './App.scss';
 
+import { Tabs } from './components/Tabs/Tabs';
+
 export const tabs = [
   { id: 'tab-1', title: 'Tab 1', content: 'Some text 1' },
   { id: 'tab-2', title: 'Tab 2', content: 'Some text 2' },
   { id: 'tab-3', title: 'Tab 3', content: 'Some text 3' },
 ];
 
-export const App = () => (
-  <div className="section">
-    <h1 className="title">Selected tab is Tab 1</h1>
-
-    <div data-cy="TabsComponent">
-      <div className="tabs is-boxed">
-        <ul>
-          <li className="is-active" data-cy="Tab">
-            <a href="#tab-1" data-cy="TabLink">
-              Tab 1
-            </a>
-          </li>
-
-          <li data-cy="Tab">
-            <a href="#tab-2" data-cy="TabLink">
-              Tab 2
-            </a>
-          </li>
-
-          <li data-cy="Tab">
-            <a href="#tab-3" data-cy="TabLink">
-              Tab 3
-            </a>
-          </li>
-        </ul>
-      </div>
-
-      <div className="block" data-cy="TabContent">
-        Some text 1
-      </div>
+function getSelectedTabTitle(tabsList, tabId) {
+  return tabsList.find(tab => tab.id === tabId);
+}
+
+export const App = () => {
+  const [activeTabId, setActiveTabId] = useState(tabs[0].id);
+  const selectedTab = getSelectedTabTitle(tabs, activeTabId);
+
+  function setNewActiveTab(tabId) {
+    const isInTabs = tabs.find(tab => tab.id === tabId);
+
+    if (isInTabs === undefined) {
+      setActiveTabId(tabs[0].id);
+
+      return;
+    }
+
+    setActiveTabId(tabId);
+  }
+
+  return (
+    <div className="section">
+      <h1 className="title">Selected tab is {selectedTab.title}</h1>
+
+      <Tabs
+        tabs={tabs}
+        activeTabId={activeTabId}
+        onTabSelected={tabId => setNewActiveTab(tabId)}
+        selectedTab={selectedTab}
+      />
     </div>
-  </div>
-);
+  );
+};

src/components/Tab/Tab.jsx

@@ -0,0 +1,22 @@
+import classNames from 'classnames';
+
+export const Tab = ({ tab, activeTabId, onTabSelected }) => {
+  return (
+    <li
+      className={classNames({ 'is-active': activeTabId === tab.id })}
+      data-cy="Tab"
+    >
+      <a
+        href={`#${tab.id}`}
+        onClick={() => {
+          if (activeTabId !== tab.id) {
+            onTabSelected(tab.id);
+          }
+        }}
+        data-cy="TabLink"
+      >
+        {tab.title}
+      </a>
+    </li>
+  );
+};

src/components/Tab/index.js

@@ -0,0 +1 @@
+export * from './Tab';

src/components/Tabs/Tabs.jsx

@@ -1 +1,44 @@
-export const Tabs = () => {};
+import { Tab } from '../Tab';
+
+export const Tabs = ({ tabs, activeTabId, onTabSelected }) => {
+  const getSelectedTabTitle = (tabsList, tabId) => {
+    return tabsList.find(tab => tab.id === tabId);
+  };
+
+  function checkAvailiableTabId(id) {
+    const isInTabs = tabs.find(tab => tab.id === id);
+
+    if (isInTabs === undefined) {
+      return tabs[0].id;
+    }
+
+    return id;
+  }
+
+  const selectedTab = getSelectedTabTitle(
+    tabs,
+    checkAvailiableTabId(activeTabId),
+  );
+
+  return (
+    <div data-cy="TabsComponent">
+      <div className="tabs is-boxed">
+        <ul>
+          {tabs.map(tab => (
+            <Tab
+              key={tab.id}
+              tab={tab}
+              activeTabId={checkAvailiableTabId(activeTabId)}
+              // activeTabId={checkAvailiableTabId(activeTabId)}
+              onTabSelected={onTabSelected}
+            />
+          ))}
+        </ul>
+      </div>
+
+      <div className="block" data-cy="TabContent">
+        {selectedTab.content}
+      </div>
+    </div>
+  );
+};