made better tabs (with context)

src/components/dialogs/Tab/index.tsx

@@ -1,16 +0,0 @@
-import React, { FC, MouseEventHandler } from 'react';
-import classNames from 'classnames';
-import styles from './styles.module.scss';
-
-interface IProps {
-  active?: boolean;
-  onClick?: MouseEventHandler<any>;
-}
-
-const Tab: FC<IProps> = ({ active, onClick, children }) => (
-  <div className={classNames(styles.tab, { [styles.active]: active })} onClick={onClick}>
-    {children}
-  </div>
-);
-
-export { Tab };

src/components/dialogs/Tab/styles.module.scss

@@ -1,20 +0,0 @@
-@import "src/styles/variables";
-
-.tab {
-  @include outer_shadow();
-
-  padding: $gap;
-  margin-right: $gap;
-  border-radius: $radius $radius 0 0;
-  font: $font_14_semibold;
-  text-transform: uppercase;
-  cursor: pointer;
-  background-color: $content_bg;
-  color: white;
-  text-decoration: none;
-  border: none;
-
-  &.active {
-    background: lighten($content_bg, 4%);
-  }
-}

src/components/dialogs/Tabs/index.tsx

@@ -1,12 +1,51 @@
-import React, { FC, useCallback } from 'react';
+import React, { createContext, FC, VFC, useContext, useState } from 'react';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
-import { IAuthState } from '~/redux/auth/types';
 
-interface IProps {}
+interface TabProps {
+  items: string[];
+}
 
-const Tabs: FC<IProps> = ({ children }) => {
-  return <div className={styles.wrap}>{children}</div>;
+const TabContext = createContext({
+  activeTab: 0,
+  setActiveTab: (activeTab: number) => {},
+});
+
+const List: VFC<TabProps> = ({ items }) => {
+  const { activeTab, setActiveTab } = useContext(TabContext);
+
+  return (
+    <div className={styles.tabs}>
+      {items.map((it, index) => (
+        <div
+          className={classNames(styles.tab, { [styles.active]: activeTab === index })}
+          onClick={() => setActiveTab(index)}
+          key={it}
+        >
+          {it}
+        </div>
+      ))}
+    </div>
+  );
 };
 
+const Content: FC<any> = ({ children }) => {
+  const { activeTab } = useContext(TabContext);
+
+  if (!Array.isArray(children) && activeTab > 0) {
+    return null;
+  }
+
+  return Array.isArray(children) ? children[activeTab] : children;
+};
+
+const Tabs = function({ children }) {
+  const [activeTab, setActiveTab] = useState(0);
+
+  return <TabContext.Provider value={{ activeTab, setActiveTab }}>{children}</TabContext.Provider>;
+};
+
+Tabs.List = List;
+Tabs.Content = Content;
+
 export { Tabs };

src/components/dialogs/Tabs/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import "~/styles/variables";
 
 .wrap {
   display: flex;
@@ -6,3 +6,27 @@
   justify-content: flex-start;
   padding: 0 $gap / 2;
 }
+
+.tab {
+  @include outer_shadow();
+
+  padding: $gap;
+  margin-right: $gap;
+  border-radius: $radius $radius 0 0;
+  font: $font_14_semibold;
+  text-transform: uppercase;
+  cursor: pointer;
+  background-color: $content_bg;
+  color: white;
+  text-decoration: none;
+  border: none;
+
+  &.active {
+    background: lighten($content_bg, 4%);
+  }
+}
+
+.tabs {
+  display: flex;
+  flex-direction: row;
+}