left panel with git logs at boris

src/components/boris/BorisStats/index.tsx

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

src/components/boris/BorisStatsGit/index.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from 'react';
+import { IBorisState } from '~/redux/boris/reducer';
+import styles from './styles.module.scss';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import { BorisStatsGitCard } from '../BorisStatsGitCard';
+
+interface IProps {
+  stats: IBorisState['stats'];
+}
+
+const BorisStatsGit: FC<IProps> = ({ stats }) => {
+  if (!stats.git.length) return null;
+
+  if (stats.is_loading) {
+    return (
+      <>
+        <div className={styles.stats__title}>
+          <Placeholder width="50%" />
+        </div>
+
+        <Placeholder width="50%" />
+        <Placeholder width="100%" />
+        <Placeholder width="50%" />
+        <Placeholder width="70%" />
+        <Placeholder width="60%" />
+        <Placeholder width="100%" />
+      </>
+    );
+  }
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.stats__title}>Изменения</div>
+
+      {stats.git
+        .filter(data => data.commit && data.timestamp && data.subject)
+        .slice(0, 5)
+        .map(data => (
+          <BorisStatsGitCard data={data} key={data.commit} />
+        ))}
+    </div>
+  );
+};
+
+export { BorisStatsGit };

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

@@ -0,0 +1,8 @@
+.stats {
+  &__title {
+    font: $font_12_semibold;
+    text-transform: uppercase;
+    opacity: 0.3;
+    margin-top: 16px !important;
+  }
+}

src/components/boris/BorisStatsGitCard/index.tsx

@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+import { IStatGitRow } from '~/redux/boris/reducer';
+import styles from './styles.module.scss';
+import { getPrettyDate } from '~/utils/dom';
+
+interface IProps {
+  data: IStatGitRow;
+}
+
+const BorisStatsGitCard: FC<IProps> = ({ data: { timestamp, subject } }) => {
+  if (!subject || !timestamp) return null;
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.time}>
+        {getPrettyDate(new Date(parseInt(`${timestamp}000`)).toISOString())}
+      </div>
+
+      <div className={styles.subject}>{subject}</div>
+    </div>
+  );
+};
+
+export { BorisStatsGitCard };

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

@@ -0,0 +1,9 @@
+.wrap {
+  margin-top: $gap;
+}
+
+.time {
+  font: $font_12_regular;
+  line-height: 17px;
+  opacity: 0.5;
+}