better boris stats

src/components/boris/BorisStats/index.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { IBorisState } from '~/redux/boris/reducer';
 import { BorisStatsGit } from '../BorisStatsGit';
+import { BorisStatsBackend } from '../BorisStatsBackend';
 
 interface IProps {
   stats: IBorisState['stats'];
@@ -9,6 +10,7 @@ interface IProps {
 const BorisStats: FC<IProps> = ({ stats }) => {
   return (
     <>
+      <BorisStatsBackend stats={stats} />
       <BorisStatsGit stats={stats} />
     </>
   );

src/components/boris/BorisStatsBackend/index.tsx

@@ -0,0 +1,74 @@
+import React, { FC } from 'react';
+import { IBorisState } from '~/redux/boris/reducer';
+import styles from './styles.module.scss';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import { sizeOf } from '~/utils/dom';
+
+interface IProps {
+  stats: IBorisState['stats'];
+}
+
+const BorisStatsBackend: FC<IProps> = ({ stats }) => {
+  if (stats.is_loading)
+    return (
+      <>
+        <div className={styles.title}>
+          <Placeholder width="50%" />
+        </div>
+      </>
+    );
+
+  if (!stats.backend) return null;
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.title}>Юнитс</div>
+
+      <ul>
+        <li>
+          В сознании <span>{stats.backend.users.alive}</span>
+        </li>
+
+        <li>
+          Криокамера <span>{stats.backend.users.total - stats.backend.users.alive}</span>
+        </li>
+      </ul>
+
+      <div className={styles.title}>Контент</div>
+
+      <ul>
+        <li>
+          Фотографии <span>{stats.backend.nodes.images}</span>
+        </li>
+
+        <li>
+          Письма <span>{stats.backend.nodes.texts}</span>
+        </li>
+
+        <li>
+          Видеозаписи <span>{stats.backend.nodes.videos}</span>
+        </li>
+
+        <li>
+          Аудиозаписи <span>{stats.backend.nodes.audios}</span>
+        </li>
+
+        <li>
+          Комментарии <span>{stats.backend.comments.total}</span>
+        </li>
+      </ul>
+
+      <div className={styles.title}>Сторедж</div>
+      <ul>
+        <li>
+          Файлы <span>{stats.backend.files.count}</span>
+        </li>
+        <li>
+          На диске <span>{sizeOf(stats.backend.files.size)}</span>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export { BorisStatsBackend };

src/components/boris/BorisStatsBackend/styles.module.scss

@@ -0,0 +1,36 @@
+.wrap {
+  ul {
+    font: $font_12_regular;
+    line-height: 24px;
+    text-transform: uppercase;
+
+    span {
+      float: right;
+      color: white;
+      font: $font_12_semibold;
+      line-height: 24px;
+    }
+
+    li {
+      border-bottom: 1px solid #333333;
+      color: #aaaaaa;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}
+
+.title {
+  font: $font_12_semibold;
+  text-transform: uppercase;
+  opacity: 0.3;
+  margin: $gap * 2 0 $gap;
+}
+
+.subtitle {
+  margin-left: $gap;
+  font: $font_12_semibold;
+  text-transform: uppercase;
+}

src/components/boris/BorisStatsGit/styles.module.scss

@@ -3,6 +3,6 @@
     font: $font_12_semibold;
     text-transform: uppercase;
     opacity: 0.3;
-    margin-top: 16px !important;
+    margin: $gap * 2 0 $gap;
   }
 }

src/components/boris/BorisStatsGitCard/styles.module.scss

@@ -1,9 +1,18 @@
 .wrap {
-  margin-top: $gap;
+  padding: $gap / 2 0;
+  border-bottom: 1px solid #333333;
+
+  &:last-child {
+    border-bottom: none;
+  }
 }
 
 .time {
   font: $font_12_regular;
   line-height: 17px;
-  opacity: 0.5;
+  opacity: 0.3;
+}
+
+.subject {
+  font: $font_14_regular;
 }

src/utils/dom.ts

@@ -215,3 +215,11 @@ export const darken = (col: string, amt: number) => {
 
   return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16);
 };
+
+export const sizeOf = (bytes: number): string => {
+  if (bytes == 0) {
+    return '0.00 B';
+  }
+  var e = Math.floor(Math.log(bytes) / Math.log(1024));
+  return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
+};