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