Add initial Tabs component

Author: Sean Prashad

web/package.json

@@ -8,6 +8,7 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "bootstrap": "^4.4.1",
+    "classnames": "^2.2.6",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "gh-pages": "^2.2.0",

web/src/components/App.js

@@ -3,13 +3,13 @@ import React from 'react';
 import './styles.scss';
 
 import Navigation from './Navigation';
-import Table from './Table';
+import Tabs from './Tabs';
 
 function App() {
   return (
     <div className="App">
       <Navigation />
-      <Table />
+      <Tabs />
     </div>
   );
 }

web/src/components/Table/TableView/index.js

@@ -22,7 +22,7 @@ function TableView({ columns, data }) {
   );
 
   return (
-    <Table align="center" striped hover {...getTableProps()}>
+    <Table align="center" responsive striped hover {...getTableProps()}>
       <thead>
         {headerGroups.map(headerGroup => (
           <tr {...headerGroup.getHeaderGroupProps()}>

web/src/components/Tabs/index.js

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import {
+  TabContent,
+  TabPane,
+  Nav,
+  NavItem,
+  NavLink,
+  Row,
+  Col,
+  Container,
+} from 'reactstrap';
+import classnames from 'classnames';
+
+import Table from '../Table';
+
+const Tabs = () => {
+  const [activeTab, setActiveTab] = useState('1');
+
+  const toggle = tab => {
+    if (activeTab !== tab) setActiveTab(tab);
+  };
+
+  return (
+    <Container>
+      <Nav tabs>
+        <NavItem>
+          <NavLink
+            className={classnames({ active: activeTab === '1' })}
+            onClick={() => {
+              toggle('1');
+            }}
+          >
+            Question List
+          </NavLink>
+        </NavItem>
+        <NavItem>
+          <NavLink
+            className={classnames({ active: activeTab === '2' })}
+            onClick={() => {
+              toggle('2');
+            }}
+          >
+            Moar Tabs
+          </NavLink>
+        </NavItem>
+      </Nav>
+      <TabContent activeTab={activeTab}>
+        <TabPane tabId="1">
+          <Row>
+            <Col>
+              <Table />
+            </Col>
+          </Row>
+        </TabPane>
+        <TabPane tabId="2">
+          <Row>
+            <Col>Tab pane 2</Col>
+          </Row>
+        </TabPane>
+      </TabContent>
+    </Container>
+  );
+};
+
+export default Tabs;

web/src/components/Tabs/styles.scss

@@ -2694,7 +2694,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.3:
+classnames@^2.2.3, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==