Added a styled tab component (#29)

- Leverages existing bootstrap-react tab components

frontend/amundsen_application/static/js/components/common/Tabs/index.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Tab, Tabs } from 'react-bootstrap';
+
+import './styles.scss';
+
+export interface TabsProps {
+  tabs: TabInfo[];
+
+  defaultTab?: string;
+  onSelect?: (key: string) => void;
+}
+
+interface TabInfo {
+  content: JSX.Element;
+  key: string;
+  title: string;
+}
+
+const TabsComponent: React.SFC<TabsProps> = ({tabs, defaultTab, onSelect}) => {
+  return (
+      <Tabs
+        id="tab"
+        className="tabs-component"
+        defaultActiveKey={ defaultTab }
+        onSelect={ onSelect }
+      >
+        {
+          tabs.map((tab) => {
+            return (
+              <Tab title={ tab.title } eventKey={ tab.key } key={ tab.key }>
+                { tab.content }
+              </Tab>
+            )
+          })
+        }
+      </Tabs>
+    )
+};
+
+export default TabsComponent;

frontend/amundsen_application/static/js/components/common/Tabs/styles.scss

@@ -0,0 +1,44 @@
+@import 'variables';
+
+.tabs-component {
+  .nav.nav-tabs {
+    border: none;
+
+    > li {
+      &.active > a {
+        &,
+        &:hover {
+          color: $gradient-4;
+        }
+
+        &:after {
+          opacity: 1;
+        }
+      }
+
+      > a {
+        background: none;
+        border: none;
+        color: $gray-light;
+        font-size: $font-size-large;
+        line-height: $line-height-large;
+
+        &:hover {
+          color: $text-color;
+        }
+
+        // Active tab indicator
+        &:after {
+          border: 2px solid $gradient-4;
+          bottom: 0;
+          content: "";
+          left: 0;
+          opacity: 0;
+          position: absolute;
+          transition: opacity 200ms ease-in;
+          width: 100%;
+        }
+      }
+    }
+  }
+}