initial commit

3 files changed, 92 insertions, 0 deletions

diff --git a/src/components/ui/Tabs/TabItem.js b/src/components/ui/Tabs/TabItem.js
new file mode 100644
index 000000000..9ff9f009e
--- /dev/null
+++ b/src/components/ui/Tabs/TabItem.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+
+import { oneOrManyChildElements } from '../../../prop-types';
+
+export default class TabItem extends Component {
+  static propTypes = {
+    children: oneOrManyChildElements.isRequired,
+  }
+
+  render() {
+    const { children } = this.props;
+
+    return (
+      <div>{children}</div>
+    );
+  }
+}
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js
new file mode 100644
index 000000000..50397f9bb
--- /dev/null
+++ b/src/components/ui/Tabs/Tabs.js
@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+
+import { oneOrManyChildElements } from '../../../prop-types';
+
+@observer
+export default class Tab extends Component {
+  static propTypes = {
+    children: oneOrManyChildElements.isRequired,
+    active: PropTypes.number,
+  };
+
+  static defaultProps = {
+    active: 0,
+  };
+
+  componentWillMount() {
+    this.setState({ active: this.props.active });
+  }
+
+  switchTab(index) {
+    this.setState({ active: index });
+  }
+
+  render() {
+    const { children: childElements } = this.props;
+    const children = childElements.filter(c => !!c);
+
+    if (children.length === 1) {
+      return <div>{children}</div>;
+    }
+
+    return (
+      <div className="content-tabs">
+        <div className="content-tabs__tabs">
+          {React.Children.map(children, (child, i) => (
+            <button
+              key={i}
+              className={classnames({
+                'content-tabs__item': true,
+                'is-active': this.state.active === i,
+              })}
+              onClick={() => this.switchTab(i)}
+              type="button"
+            >
+              {child.props.title}
+            </button>
+          ))}
+        </div>
+        <div className="content-tabs__content">
+          {React.Children.map(children, (child, i) => (
+            <div
+              key={i}
+              className={classnames({
+                'content-tabs__item': true,
+                'is-active': this.state.active === i,
+              })}
+              type="button"
+            >
+              {child}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/ui/Tabs/index.js b/src/components/ui/Tabs/index.js
new file mode 100644
index 000000000..e4adb62c7
--- /dev/null
+++ b/src/components/ui/Tabs/index.js
@@ -0,0 +1,6 @@
+import Tabs from './Tabs';
+import TabItem from './TabItem';
+
+export default Tabs;
+
+export { TabItem };