added fake profile stats

src/containers/profile/ProfilePageStats/index.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+
+interface Props {}
+
+const Row: FC<{ count: number; title: string }> = ({ count, title }) => (
+  <div className={styles.row}>
+    <div className={styles.counter}>{count > 999 ? '999+' : count}</div>
+    <div className={styles.title}>{title}</div>
+  </div>
+);
+
+const ProfilePageStats: FC<Props> = () => (
+  <div className={styles.wrap}>
+    <Row count={9} title="лет в бункере" />
+    <Row count={99} title="постов" />
+    <Row count={99999} title="комментариев" />
+  </div>
+);
+
+export { ProfilePageStats };

src/containers/profile/ProfilePageStats/styles.module.scss

@@ -0,0 +1,43 @@
+@import "~/styles/variables";
+
+.wrap {
+  @include outer_shadow;
+
+  padding: $gap;
+  background: $content_bg;
+  border-radius: $radius;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  grid-row-gap: $gap;
+  grid-column-gap: $gap;
+  grid-auto-flow: row;
+
+  & > .row:not(:last-child) {
+    margin-bottom: $gap;
+  }
+}
+
+.row {
+  width: 100%;
+  background-color: lighten($content_bg, 4%);
+  border-radius: $radius;
+  padding: $gap;
+  box-sizing: border-box;
+  height: 100%;
+}
+
+.counter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font: $font_32_bold;
+  height: 60px;
+}
+
+.title {
+  font: $font_12_semibold;
+  text-align: center;
+  word-wrap: break-word;
+  opacity: 0.5;
+}

src/layouts/ProfileLayout/index.tsx

@@ -11,6 +11,7 @@ import { FlowGrid } from '~/components/flow/FlowGrid';
 import { FlowLayout } from '~/layouts/FlowLayout';
 import { Sticky } from '~/components/containers/Sticky';
 import { selectFlow } from '~/redux/flow/selectors';
+import { ProfilePageStats } from '~/containers/profile/ProfilePageStats';
 
 type Props = RouteComponentProps<{ username: string }> & {};
 
@@ -34,7 +35,12 @@ const ProfileLayout: FC<Props> = ({
     <Container className={styles.wrap}>
       <div className={styles.left}>
         <Sticky>
-          <ProfilePageLeft profile={profile} username={username} />
+          <div className={styles.row}>
+            <ProfilePageLeft profile={profile} username={username} />
+          </div>
+          <div className={styles.row}>
+            <ProfilePageStats />
+          </div>
         </Sticky>
       </div>
 

src/layouts/ProfileLayout/styles.module.scss

@@ -14,3 +14,7 @@
 
 .right {
 }
+
+.row {
+  margin-bottom: $gap;
+}