From 832386d39a0a1421c6156022f2f18bb39c4a1663 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sun, 26 Dec 2021 11:35:07 +0700
Subject: [PATCH] added boris tabs

---
 src/components/boris/BorisUIDemo/index.tsx |  9 +++++++++
 src/components/dialogs/Tabs/index.tsx      | 15 +++++++++++----
 src/layouts/BorisLayout/index.tsx          | 14 +++++++++++++-
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/components/boris/BorisUIDemo/index.tsx b/src/components/boris/BorisUIDemo/index.tsx
index bba0c86a..4a958272 100644
--- a/src/components/boris/BorisUIDemo/index.tsx
+++ b/src/components/boris/BorisUIDemo/index.tsx
@@ -4,6 +4,7 @@ import styles from './styles.module.scss';
 import markdown from '~/styles/common/markdown.module.scss';
 import { Group } from '~/components/containers/Group';
 import { Button } from '~/components/input/Button';
+import { InputText } from '~/components/input/InputText';
 
 interface IProps {}
 
@@ -16,6 +17,14 @@ const BorisUIDemo: FC<IProps> = () => (
         разработке
       </p>
 
+      <h2>Инпуты</h2>
+
+      <form autoComplete="off">
+        <InputText title="Обычный инпут" />
+        <InputText title="Инпут с ошибкой" error="Ошибка" />
+        <InputText title="Пароль" type="password" />
+      </form>
+
       <h2>Кнопки</h2>
 
       <h4>Цвета</h4>
diff --git a/src/components/dialogs/Tabs/index.tsx b/src/components/dialogs/Tabs/index.tsx
index 80c7e0d2..82556052 100644
--- a/src/components/dialogs/Tabs/index.tsx
+++ b/src/components/dialogs/Tabs/index.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, FC, VFC, useContext, useState } from 'react';
+import React, { createContext, FC, VFC, useContext, useState, useMemo } from 'react';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
 
@@ -31,12 +31,19 @@ const List: VFC<TabProps> = ({ items }) => {
 
 const Content: FC<any> = ({ children }) => {
   const { activeTab } = useContext(TabContext);
+  const notEmptyChildren = useMemo(() => {
+    if (!Array.isArray(children)) {
+      return [children];
+    }
 
-  if (!Array.isArray(children) && activeTab > 0) {
-    return null;
+    return children.filter(it => it);
+  }, [children]);
+
+  if (Array.isArray(notEmptyChildren) && notEmptyChildren.length - 1 < activeTab) {
+    return notEmptyChildren[notEmptyChildren.length - 1];
   }
 
-  return Array.isArray(children) ? children[activeTab] : children;
+  return notEmptyChildren[activeTab];
 };
 
 const Tabs = function({ children }) {
diff --git a/src/layouts/BorisLayout/index.tsx b/src/layouts/BorisLayout/index.tsx
index cb4df796..83456a9d 100644
--- a/src/layouts/BorisLayout/index.tsx
+++ b/src/layouts/BorisLayout/index.tsx
@@ -12,6 +12,7 @@ import { useUserContext } from '~/utils/context/UserContextProvider';
 import { BorisUsageStats } from '~/redux/boris/reducer';
 import { Tabs } from '~/components/dialogs/Tabs';
 import { Superpower } from '~/components/boris/Superpower';
+import { BorisUIDemo } from '~/components/boris/BorisUIDemo';
 
 type IProps = {
   title: string;
@@ -38,7 +39,18 @@ const BorisLayout: FC<IProps> = ({ title, setIsBetaTester, isTester, stats }) =>
 
         <div className={styles.container}>
           <Card className={styles.content}>
-            <BorisComments />
+            <Tabs>
+              <Superpower>
+                <Tabs.List items={['Комментарии', 'ЮАЙ ПЛЭЙГРАУНД']} />
+              </Superpower>
+
+              <Tabs.Content>
+                <BorisComments />
+                <Superpower>
+                  <BorisUIDemo />
+                </Superpower>
+              </Tabs.Content>
+            </Tabs>
           </Card>
 
           <Group className={styles.stats}>