added boris tabs

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>

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 children.filter(it => it);
-    return null;
+  }, [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 }) {

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}>