Solution

src/App.tsx

@@ -1,46 +1,27 @@
-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';
+import { Tab } from './components/Tabs/Types/Tab';
 
-export const tabs = [
+export const tabs: Tab[] = [
   { 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: React.FC = () => {
+  const [selectedTab, setSelectedTab] = useState<Tab>(tabs[0]);
+
   return (
     <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>
-      </div>
+      <h1 className="title">{`Selected tab is ${selectedTab.title}`}</h1>
+      <Tabs
+        tabs={tabs}
+        selectedTabId={selectedTab.id}
+        onTabSelected={setSelectedTab}
+      />
     </div>
   );
 };

src/components/Tabs/Tabs.tsx

@@ -1 +1,51 @@
-export const Tabs = () => {};
+import React from 'react';
+import cn from 'classnames';
+import { Tab } from '../Tabs/Types/Tab';
+
+type Props = {
+  tabs: Tab[];
+  selectedTabId: string;
+  onTabSelected: (tab: Tab) => void;
+};
+
+export const Tabs: React.FC<Props> = ({
+  tabs,
+  selectedTabId,
+  onTabSelected,
+}) => {
+  const selectedTab = tabs.find(tab => tab.id === selectedTabId) || tabs[0];
+
+  const selectTab = (tab: Tab) => {
+    if (tab.id !== selectedTabId) {
+      onTabSelected(tab);
+    }
+  };
+
+  return (
+    <div data-cy="TabsComponent">
+      <div className="tabs is-boxed">
+        <ul>
+          {tabs.map(tab => (
+            <li
+              className={cn({ 'is-active': selectedTab.id === tab.id })}
+              key={tab.id}
+              data-cy="Tab"
+            >
+              <a
+                href={`#${tab.id}`}
+                data-cy="TabLink"
+                onClick={() => selectTab(tab)}
+              >
+                {tab.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div className="block" data-cy="TabContent">
+        {selectedTab.content}
+      </div>
+    </div>
+  );
+};

src/components/Tabs/Types/Tab.ts

@@ -0,0 +1,5 @@
+export interface Tab {
+  id: string;
+  title: string;
+  content: string;
+}