From 3cdc3824579c58f520b49a17087940eb4991b0d2 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 1 Oct 2021 16:12:27 +0700
Subject: [PATCH] added fake profile stats

---
 .../profile/ProfilePageStats/index.tsx        | 21 +++++++++
 .../ProfilePageStats/styles.module.scss       | 43 +++++++++++++++++++
 src/layouts/ProfileLayout/index.tsx           |  8 +++-
 src/layouts/ProfileLayout/styles.module.scss  |  4 ++
 4 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 src/containers/profile/ProfilePageStats/index.tsx
 create mode 100644 src/containers/profile/ProfilePageStats/styles.module.scss

diff --git a/src/containers/profile/ProfilePageStats/index.tsx b/src/containers/profile/ProfilePageStats/index.tsx
new file mode 100644
index 00000000..53ae4674
--- /dev/null
+++ b/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 };
diff --git a/src/containers/profile/ProfilePageStats/styles.module.scss b/src/containers/profile/ProfilePageStats/styles.module.scss
new file mode 100644
index 00000000..a943ab8a
--- /dev/null
+++ b/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;
+}
diff --git a/src/layouts/ProfileLayout/index.tsx b/src/layouts/ProfileLayout/index.tsx
index 24b6dca9..27f1df73 100644
--- a/src/layouts/ProfileLayout/index.tsx
+++ b/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>
 
diff --git a/src/layouts/ProfileLayout/styles.module.scss b/src/layouts/ProfileLayout/styles.module.scss
index aa05c21f..5f1f1c20 100644
--- a/src/layouts/ProfileLayout/styles.module.scss
+++ b/src/layouts/ProfileLayout/styles.module.scss
@@ -14,3 +14,7 @@
 
 .right {
 }
+
+.row {
+  margin-bottom: $gap;
+}